I want to achieve the effect that when I click the button of 'Design Custom Cables & Order Online', the accordion content of step 1 will collapse and step 2 content will expand immediately, however, after applying the jquery, the step2 content won't expand immediately and the step 1 content won't collapse as well, can anyone master help me out, appreciate it!
$( document ).ready(function()
{
/*--hide step2 content but show step1's--*/
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
/*--disable step2 title button initially--*/
$('#F-step2-title-btn').attr("disabled", true);
/*----------accordion effect part------------*/
$('.F-accordion-container-div').click(function ()
{
let id = $(this).find('.F-accordion-content').attr('id');
switch (id)
{
case 'F-step1-cont':
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
break;
case 'F-step2-cont':
$('#F-step1-cont').css('display', 'none');
$('#F-step2-cont').css('display', 'block');
break;
}
});
$('#F-step1-content-left').click(function ()
{
$('#F-step2-cont').css('display', 'block');
$('#F-step1-cont').css('display', 'none');
$('#F-step2-title-btn').attr("disabled", false);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS.css">
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<!----Step 1---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption">
<button class="F-accordion-caption-btn"> Step 1: Select Cable Builder Tool</button>
</div>
<div class="F-accordion-content" id="F-step1-cont">
<div class="F-step1-content" id="F-step1-content-left">
<button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
<ul>
<li>Design using common parts</li>
<li>Receive instant pricing</li>
<li>Order through shopping cart</li>
</ul>
</div><!--
--><div class="F-step1-content">
<button class="F-step1-content-btn">Send Us Specifications</button>
<ul>
<li>Easy-to-use form</li>
<li>Personalized service from our staff</li>
<li>Request proceeded quickly</li>
</ul>
</div>
</div>
</div>
<!----Step 2---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption" >
<button class="F-accordion-caption-btn" id="F-step2-title-btn"> Step 2: Select Type</button>
</div>
<div class="F-accordion-content" id="F-step2-cont">
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
--><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG">
<div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Copper Patch Cable</div>
</div>
</div>
</div>
</body>
<foot>
<script src="js.js" ></script>
</foot>
</html>
it should work in normal but its inside a parent with a click handler .. so to avoid this use
e.stopPropagation() Prevents the event
from bubbling up the DOM tree, preventing any parent handlers from
being notified of the event.
$( document ).ready(function()
{
/*--hide step2 content but show step1's--*/
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
/*--disable step2 title button initially--*/
$('#F-step2-title-btn').attr("disabled", true);
/*----------accordion effect part------------*/
$('.F-accordion-container-div').click(function ()
{
let id = $(this).find('.F-accordion-content').attr('id');
switch (id)
{
case 'F-step1-cont':
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
break;
case 'F-step2-cont':
$('#F-step1-cont').css('display', 'none');
$('#F-step2-cont').css('display', 'block');
break;
}
});
$('#F-step1-content-left button').click(function (e)
{
e.stopPropagation();
$('#F-step2-cont').css('display', 'block');
$('#F-step1-cont').css('display', 'none');
$('#F-step2-title-btn').attr("disabled", false);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS.css">
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<!----Step 1---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption">
<button class="F-accordion-caption-btn"> Step 1: Select Cable Builder Tool</button>
</div>
<div class="F-accordion-content" id="F-step1-cont">
<div class="F-step1-content" id="F-step1-content-left">
<button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
<ul>
<li>Design using common parts</li>
<li>Receive instant pricing</li>
<li>Order through shopping cart</li>
</ul>
</div><!--
--><div class="F-step1-content">
<button class="F-step1-content-btn">Send Us Specifications</button>
<ul>
<li>Easy-to-use form</li>
<li>Personalized service from our staff</li>
<li>Request proceeded quickly</li>
</ul>
</div>
</div>
</div>
<!----Step 2---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption" >
<button class="F-accordion-caption-btn" id="F-step2-title-btn"> Step 2: Select Type</button>
</div>
<div class="F-accordion-content" id="F-step2-cont">
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
--><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG">
<div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Copper Patch Cable</div>
</div>
</div>
</div>
Related
I am encountering a strange problem.
I am using swipe on materialize tabs and when i make swipe without the modal it works fine but when i include them in the modal the swipe feature does not work anymore
$(document).ready(function() {
$('.modal').modal();
$('.tabs').tabs({
swipeable: true
});
})
div.tabs-content.carousel.carousel-slider {
height: 200px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
<li><a href='#profession-registration-modal' class='orange darken-1 modal-trigger'>Open</a></li>
<div id="profession-registration-modal" class="modal">
<div class="modal-content">
<h4>Register your profession</h4>
<div class="row">
<div class="col s12">
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
<li class="tab col s3">Test 3</li>
</ul>
<div id="test-swipe-1" class="col s12 blue">Test 1</div>
<div id="test-swipe-2" class="col s12 red">Test 2</div>
<div id="test-swipe-3" class="col s12 green">Test 3</div>
</div>
</div>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
Here is the fiddle: jsfiddle
Because the modal is hidden by default, normal initialization of tabs within modals won't work. You can use callbacks like onOpenEnd to reinitialize your tabs so that they render correctly once the modal is fully opened.
$('.modal').modal({
onOpenEnd: function(el) {
$(el).find('.tabs').tabs({ swipeable: true });
}
});
Here is an updated fiddle that uses that callback: https://jsfiddle.net/y7rmbd6w/14/
Since jQuery is no longer a dependency in Materialize CSS, so in order to do it with vanillaJS, one can use this -
document.addEventListener('DOMContentLoaded', function() {
const options = {
onOpenEnd: (el) => {
M.Tabs.init(el.querySelector('.tabs'), {
swipeable: true
});
}
}
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems, options);
});
This is the site in question: driglight.com/Learn5.html
The purpose of this site is to click the audio and then choose which image you believe to be the correct representation of the note that was played.
I want to randomize the audio and answers every time the page is refreshed.
When the audio is randomized I need to make sure that the audio that is chosen has it's matching correct answer of an image also chosen and placed randomly among the answers. Also,when any possible answer image is clicked, a div will appear that says 'Good Job!' or 'incorrect'. So when the correct answer is randomized it will need to have the 'Good Job' div to follow it.
Here is the code in html:
<!DOCTYPE html>
<head>
<title>Learn</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/stuff.js"></script>
<!-- <script src="js/Timhasnoinput.js"></script> -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="header-wrapper">
<div class="container">
<div class="row-fluid">
<div class="site-name">
<h1>Music Website</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Learn</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">→ Hello</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">About</option>
<option value="#">Learn</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12 ">
<div class="main-caption">
<h1>Music Website</h1>
<h6>Learning Music</h6>
</div>
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12">
<div class="banner">
<div class="audiobuttonholder">
<div class="audioholder" style="padding-bottom:24px;">
<audio controls id="audio1">
hello
</audio>
</div>
<div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;">
</div>
<div class = "numberPage">
Pg. 3 Trebble Cleff
</div>
<div class = "control">
<ul>
<div id="div1" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div1image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage1" style="height:200px;width:200px;
onclick="showDivOne()" />
</ul>
<ul>
<div id="div2" style="display:none; float: right; margin-right: 120px;" >
<img id=div2image imageC="incorrect.png" src="incorrect.png" />
</div>
<input type="image" id="myimage2" style="height:200px;width:200px; padding-
top:24px;" onclick="showDivTwo()"/>
</ul>
<ul>
<div id="div3" style="display:none; float: right; margin-right: 120px;
padding-top: 40px;" >
<img id=div3image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage3" style="height:200px;width:200px;padding-
top:24px;" onclick="showDivThree()"/>
</ul>
<ul>
<div id="div4" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div4image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage4" style="height:200px;width:200px;"
onclick="showDivFour()" />
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="featured-images">
<ul class="grid effect-8" id="grid">
<li>
<div class="block">
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</li>
</ul>
<div class="block-content">
<div class="user-info">
<h4>Home</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Learn</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Contact</h4>
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>
<script>
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
</script>
<script>
$('#myCarousel').carousel({
interval: 1800
});
</script>
</body>
</html>
And here is the code in Javascript:
function showDivFour() {
document.getElementById('div4').style.display = "block";
}
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
function showDivOne() {
document.getElementById('div1').style.display = "block";
}
function showDivTwo() {
document.getElementById('div2').style.display = "block";
}
function showDivThree() {
document.getElementById('div3').style.display = "block";
}
// THIS SHOULD BE THE BETTER ONE
var correctFileC = $('#div1image').attr("div_answer");
var correctFileC = $('#div2image').attr("div_answer");
var correctFileC = $('#div3image').attr("div_answer");
var correctFileC = $('#div4image').attr("div_answer");
var correctFile1 = $('#myimage1').attr("div_if");
var correctFile2 = $('#myimage2').attr("div_if");
var correctFile3 = $('#myimage3').attr("div_if");
var correctFile4 = $('#myimage4').attr("div_if");
var audio_1 = ["LowATrebbleCleffPianoVC.mp3","LowETrebbleCleffPianoVC.mp3",
"LowGTrebbleCleffPianoVC.mp3","MidBTrebbleCleffPianoVC.mp3",
"MidCTrebbleCleffPianoVC.mp3","MidDTrebbleCleffPianoVC.mp3"];
var rand_audio_1 =
audio_1[Math.floor(Math.random()*audio_1.length)].getElementByName.
(audioholder.innerHTML(rand_audio_1);
function div_if(){
if(audio_1[0]){
var R1 = ["myimage1","TrebbleCleffLowA.gif"],["myimage2","TrebbleCleffLowA.gif"],["myimage3","TrebbleCleffLowA.gif"],["myimage4","TrebbleCleffLowA.gif"];
if[R1(var i=0; i<R1.length;i++).length=4];
} else if(audio_1[1]){
var R2 = ["myimage1","LowE.gif"],["myimage2","LowE.gif"],["myimage3","LowE.gif"],["myimage4","LowE.gif"];
if[R2(var i=0; i<R2.length;i++).length=4];
do nothing
} else if(audio_1[2]){
var R3 = ["myimage1","LowG.gif"],["myimage2","LowG.gif"],["myimage3","LowG.gif"],["myimage4","LowG.gif"];
if[R3(var i=0; i<R3.length;i++).length=4];
do nothing
} else if(audio_1[3]){
var R4 = ["myimage1","MidB.gif"],["myimage2","MidB.gif"],["myimage3","MidB.gif"],["myimage4","MidB.gif"];
if[R4(var i=0; i<R4.length;i++).length=4];
do nothing
} else if(audio_1[4]){
var R5 = ["myimage1","MidC.gif"],["myimage2","MidC.gif"],["myimage3","MidC.gif"],["myimage4","MidC.gif"];
if[R5(var i=0; i<R5.length;i++).length=4];
do nothing
{ else if(audio_1[5]){
var R6 = ["myimage1","MidD.gif"],["myimage2","MidD.gif"],["myimage3","MidD.gif"],["myimage4","MidD.gif"];
if[R6(var i=0; i<R6.length;i++).length=4];
do nothing
} else if{
L1.Push(R);
} else if{
L1.Push(R1)
} else if{
L1.Push(R2)
} else if{
L1.Push(R3)
} else if{
L1.Push(R4)
}
function div_answer(){
if(R[0]){
document.getElementById(div1).innerHTML(divC);
divC.src='GoodJob.png'{
else if(R[1]){
document.getElementById(div2).innerHTML(divC);
divC.src='GoodJob.png'
}
else if(R[2]){
document.getElementById(div3).innerHTML(divC);
divC.src='GoodJob.png'
}
else {
document.getElementById(div4).innerHTML(divC);
divC.src='GoodJob.png'
}
}
}
I assume every audio fragment will have an image? So with that in mind, you create a random index to select an audio fragment (which you already do). Why don't you store that index in a variable and associate the image fragment with it?
Another option would be to create an object. So you make your array with audiofragments and then you initialize a new JS object, and assign the names of the images to 'properties' with your audiofragment as key. Like this:
var images = {};
images[audioname] = image-name;
***Do this for each audiofragment of course***
That way you can just ask the image from your images-object, using the property audioname.
When the page renders, place some value inside the attributes for the images or div:
<img id=myimage data-audio-file="xyz123.mp3" src="...." />
<div data-audio-file="xyz123.mp3" src="...." >My Content</div>
Read the attribute out when it's time to take some action:
var correctFile = $('#myimage').attr("data-audio-file");
I have TWO main questions that I really would have help with.
I have googled and searched for some day now without any help, but if you know any links that I maybe haven't watched or any site with help, then give me.
I would appreciated it, OR if you already have the code/sample code, would help :-)
I work with PhoneGap & JQuery Mobile right now, and the thing is this.
I have a 'textarea' there you write something, then a save button, what I want it to do is that when I press the save-button, the textvalue I wrote in the textarea would get saved in a listview in another page of the app. I have looked at "localstorage" but nothing works correctly.
(Also, if you write something in textarea and you press the cancel button, the text in the textarea should be deleted next time you go in to that page.)
The second question is:
When I press the save button, it should begin to count, in seconds, minutes, hours, days.
Think of it like this. I write "toothbrush" in the textarea and press save, now when I go to the listview-page, I can see it says toothbrush in the listview, beside the text it says 1m, 5m, 1h, it just update when it was last time I bought or changed the toothbrush, so next time I open the app, I can see "TOOTHBRUSH: 4Days, 16HRS, 52MINS AGO". In that way I can check when I bought something, or changed something.
This is my codes, both html & .js, what should I do so this mission will work.
Any suggestions, sites, or code you guys have that would help?
Thank you so much.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Last Time I Did It!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="lib/jquery-1.6.4.js"></script>
<script src="lib/jquery.mobile-1.1.0.js"></script>
<link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
<link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Last time I did it</h1>
</div>
<div data-role="content"></div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
</li>
<li>
<a data-role="button" href="#page2" data-transition="slide" id="show" data-rel="page">SHOW</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Add event</h1>
</div>
<div data-role="content">
<textarea></textarea>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#page3" data-transition="slide" id="save">SAVE</a>
</li>
<li>
<a data-role="button" href="#page1" id="cancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
Back
<h1>Events</h1>
</div>
<div data-role="content">
<ol data-role="listview" id="orderedList" data-inset="true"></ol>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" id="edit">EDIT</a>
</li>
<li>
<a data-role="button" id="delete">DELETE</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
and my almost empty -js code.
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#add', function(){
$.mobile.navigate( "#page2", { transition : "slide", info: "info about the #bar hash" });
});
});
function save ()
{
var fieldValue = document.getElementById('textarea').value;
localStorage.setItem('content', orderedList);
}
EDIT:
Here is my new html & js file, after looked at your awesome code-example, but when I run it on my phone with phonegap, still, the save, cancel, the time and even the saved text will not show up.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Last Time I Did It!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="lib/jquery-1.6.4.js"></script>
<script src="lib/jquery.mobile-1.1.0.js"></script>
<link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
<link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Last time I did it</h1>
</div>
<div data-role="content"></div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
</li>
<li>
<a data-role="button" href="#page3" data-transition="slide" id="show" data-rel="page">SHOW</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Add event</h1>
</div>
<div data-role="content">
<textarea id="newItemText"></textarea>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" href="#" data-transition="slide" id="btnSave">SAVE</a>
</li>
<li>
<a data-role="button" href="#page1" id="btnCancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
Back
<h1>Events</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="orderedList" data-inset="true">
</ul>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>
<a data-role="button" id="edit">EDIT</a>
</li>
<li>
<a data-role="button" id="delete">DELETE</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And the JS file.
$(document).on('pagebeforeshow', '#page3', function(){
//setup the current list
if(localStorage.getItem('TaskList')){
var TheList = [];
TheList = JSON.parse(localStorage.getItem('TaskList'));
var items = '';
for (var i = 0; i < TheList.length; i++) {
items += '<li><h3>' + TheList[i].text + '</h3><p>' + timeAgo( (new Date(TheList[i].time).getTime())/1000) + ' ago<p></li>';
}
$('#orderedList').empty().append($(items)).listview('refresh');
}
});
$(document).on('pageinit', '#page2', function(){
$('#btnCancel').on("click", function(){
$('#newItemText').val(''); //CLEAR TEXT AREA
});
$('#btnSave').on("click", function(){
var TheList = [];
if(localStorage.getItem('TaskList')){
TheList = JSON.parse(localStorage.getItem('TaskList'));
}
var newitem = $('#newItemText').val();
var task = {text: newitem, time: new Date() };
TheList.push(task);
localStorage.setItem('TaskList', JSON.stringify(TheList));
$('#newItemText').val(''); //CLEAR TEXT AREA
$.mobile.navigate( "#page3", { transition : "slide" });
});
});
function timeAgo(time){
var units = [
{ name: "second", limit: 60, in_seconds: 1 },
{ name: "minute", limit: 3600, in_seconds: 60 },
{ name: "hour", limit: 86400, in_seconds: 3600 },
{ name: "day", limit: 604800, in_seconds: 86400 },
{ name: "week", limit: 2629743, in_seconds: 604800 },
{ name: "month", limit: 31556926, in_seconds: 2629743 },
{ name: "year", limit: null, in_seconds: 31556926 }
];
var diff = (new Date() - new Date(time*1000)) / 1000;
if (diff < 5) return "now";
var i = 0;
while (unit = units[i++]) {
if (diff < unit.limit || !unit.limit){
var diff = Math.floor(diff / unit.in_seconds);
return diff + " " + unit.name + (diff>1 ? "s" : "");
}
};
}
SOLUTION:
The JSFiddler code-example, the demo is perfect and are based on jQuery 1.9.1 & jQuery Mobile 1.3.0b1, I used 1.6.4 & 1.1.0.
After updating this two .js files, everything worked on PhoneGap!
Here is a DEMO
There are many questions within your problem, so I will probably not manage to answer all of them. To use localStorage with an array of 'tasks' you use JSON.stringify when saving and JSON.parse when retrieving.
So, each time page3 is displayed, you retrieve the current list of items from localStorage, create list items, empty the list and then append the created items :
$(document).on('pagebeforeshow', '#page3', function(){
//setup the current list
if(localStorage.getItem('TaskList')){
var TheList = [];
TheList = JSON.parse(localStorage.getItem('TaskList'));
var items = '';
for (var i = 0; i < TheList.length; i++) {
items += '<li><h3>' + TheList[i].text + '</h3><p>' + TheList[i].time + '<p></li>';
}
$('#orderedList').empty().append($(items)).listview('refresh');
}
});
When entering a new item, you want to store the text and the current time, so use an object. First get the current list from localStorage, then create the new item and add it to the list, finally save back to localStorage clear the textarea and navigate to page3. The cancel button just clears the textarea:
$(document).on('pageinit', '#page2', function(){
$('#btnCancel').on("click", function(){
$('#newItemText').val(''); //CLEAR TEXT AREA
});
$('#btnSave').on("click", function(){
var TheList = [];
if(localStorage.getItem('TaskList')){
TheList = JSON.parse(localStorage.getItem('TaskList'));
}
var newitem = $('#newItemText').val();
var task = {text: newitem, time: new Date() };
TheList.push(task);
localStorage.setItem('TaskList', JSON.stringify(TheList));
$('#newItemText').val(''); //CLEAR TEXT AREA
$.mobile.navigate( "#page3", { transition : "slide" });
});
});
I have four divs, each div contain images and contents. one next and previous button. at a time only div will show. on click of next the second div have to be shown and first will hide. same upto fourth div. Need to use pure Javascript. No jquery or javascript plugins is allowed.... :(. Can anyone help me to do this?.
Thanks!
My html Code:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="theProduct">
<div id="slides"> <img src="img/prev.jpg" width="29" height="29" alt="Arrow Prev"> <img src="img/next.jpg" width="29" height="29" alt="Arrow Next">
<!-- Show/hide Div strating here -->
<div class="slides_container">
<div class="div1">
<div class="img1">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div2">
<div class="img2">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div3">
<div class="img3">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div4">
<div class="img4">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
</div>
<!-- Show/Hide Div ending here -->
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> </div>
</div>
</body>
</html>
Practical with this below
<style type="text/css" media="screen">
#container{position:relative;width:120px;height:120px;}
#container div{position:absolute;width:120px;height:120px;}
#box-red{background:red;}
#box-yellow{background:yellow;display:none;}
#box-green{background:green;display:none;}
#box-maroon{background:maroon;display:none;}
</style>
Javascipt
<script type="text/javascript">
var $c =0;
function next(){
var boxes = document.getElementsByClassName("box");
$c +=1;
if($c >= boxes.length) $c = 0;
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
function prev(){
var boxes = document.getElementsByClassName("box");
$c -=1;
if($c < 0) $c = (boxes.length-1);
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
</script>
HTML
<div id="container">
<div id="box-red" class="box">DIV1</div>
<div id="box-yellow" class="box">DIV2</div>
<div id="box-green" class="box">DIV3</div>
<div id="box-maroon" class="box">DIV4</div>
</div>
previous next
I think this is what you are loking for:
http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript
But you could put that in one function:
<script language="JavaScript">
function ShowHide(divId){
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
function toggleImage(forwrad){
var imageConainer = document.getElementByID(Your Parent div id);
var images = imageContainer.childNodes;
var showIndex = '';
for(var i=0; i<images.length;i++){
if(images[i].style.display == 'block'){
images[i].style.display == 'none';
if(forwrad){
showIndex = 1+1;
}
else{
showIndex = 1-1;
}
}
}
images[showIndex].style.display = true;
}
technically it's possible with pure CSS as well. with the :target pseudo class. but that would pollute your url with # tags. But you may actually want that.
Also Selectivizr is a good polyfill for old browsers
I made a nested sort-able accordion, but there's something not working. In id 'accordian2', the heights of each item are too small, and a vertical scroll bar is showing. The value of the item which is '1' is getting clipped so only half of it shows.
Can someone please tell me what the problem is in my code?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
</head>
<body>
<script>
$(function() {
function create_accordian(str) {
$( str )
.accordion({
header: '> div > h3'
})
.sortable({
axis: 'y',
handle: 'h3',
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( 'h3' ).triggerHandler( 'focusout' );
}
});
}
create_accordian('#accordion');
create_accordian('#accordion1');
create_accordian('#accordion2');
//create_accordian('#accordion3');
});
</script>
<style type='text/css'>
/*demo page css*/
#accordion { font: 62.5% 'Trebuchet MS', sans-serif; margin: 10px;}
</style>
<div id='accordion'>
<div class='group'>
<h3>
<a href='#'>1. blah</a>
</h3>
<div>
<div id='accordion1'>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
<a href='#'>
Edit Item
</a>
<br/>
<span style='display:none;'>
4900bc3b-a086-4d0c-89b8-09e3724aac8e
</span>
</div>
</div>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
<a href='#'>
Edit Item
</a>
<br/>
<span style='display:none;'>
0d59f87e-a294-4f85-beae-a0e266ab6a7e
</span>
</div>
</div>
</div>
</div>
</div>
<div class='group'>
<h3>
<a href='#'>2. blah</a>
</h3>
<div>
<div id='accordion2'>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
1
</div>
</div>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
1
</div>
</div>
<div class='group'>
<h3>
<a href='#'>blah</a>
</h3>
<div>
1
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
#omega, set autoHeight option to false in your accordion script. eg.
function create_accordian(str) {
$( str )
.accordion({
header: '> div > h3',
autoHeight: false // set this to false
})
.sortable({
axis: 'y',
handle: 'h3',
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( 'h3' ).triggerHandler( 'focusout' );
}
});
}
DEMO