<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace
Related
I have a code, which is working fine here, on CodePen, on JSFiddle, but as soon as I copy and paste it onto Sublime Text and launch the website with Firefox, the drop-down menu doesn't work.
I have a network connection and I checked with a few browsers. How can I solve this problem?
The problem is jQuery is not ready when your script is loaded.
These web development platforms like CodePen and JSFiddle usually load your script after every dependency has been loaded.
Move your <script src="script.js"></script> to just before you </body> tag and it should work fine.
As suggested by the subarachnid user, change your .html file to the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Herbe Armée, Folle Béton</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img class="titre" src="titre.png">
<div class="wrapper-top">
<div class="one">
<ul class="menu">
<li class='sub-menu'>
<a href='#'>Expositions passées</a>
<ul>
<li> <a href='#'>Nom de l'expo 1</a></li>
<li> <a href='#'>Nom de l'expo 2</a></li>
<li> <a href='#'>Nom de l'expo 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="two">Instagram, Facebook, mail</div>
<div class="three">Exposition en cours</div>
<div class="four"></div>
<div class="five">Artistes</div>
<div class="six">Six</div>
</div>
<div class="wrapper-bottom">
<div class="seven">Sept</div>
<div class="eight">Huit</div>
<div class="nine">Neuf</div>
<div class="ten">Dix</div>
<div class="eleven">Onze</div>
<div class="twelve">Crédits du site</div>
</div>
<div class="heure"><span id="cd"></span></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
https://jsfiddle.net/tdh0z6qy/
or as SaymoinSam said :
I need to put my code inside
$( document ).ready(function() {});
I am making a basic blackjack game with angularjs and using bootstrap for the layout however I cannot seem to make it work.
What I want is a heading across the top, the content of the game in the middle and left and a list of current players on the right but isn't everything is running down the page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blackjack</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="./angular.js"></script>
<script src="./angular-animate.js"></script>
<script src="./angular-touch.js"></script>
<script src="./ui-bootstrap.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="main">
<div class = "row">
<div class="col-sm-12">
<h1>Black Jack</h1>
</div>
</div>
<div class="row">
<div class = "col-sm-10">
<div ng-include="'play.html'" my-replace>
</div>
<div ng-include="'next.html'" my-replace>
</div>
<div ng-include="'start.html'" my-replace> </div>
</div>
<div class="col-sm-2">
<ul class = "row">
<li class="col-sm-12">
<h2>Players</h2>
</li>
<li class = "col-sm-12" ng-repeat="player in players">
<span>{{player.name}}: <button ng-if="!started" ng-click='removePlayer(player)'>Remove</button></span>
</li>
</ul>
</div>
</div>
</div>
<!--
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> </script>
<script>
div = $("div");
(function add(div){
div.each(function(i, val){
this.innerHTML=this.nodeName+" open "+this.className+" "+this.innerHTML+" "+this . nodeName+" close"
add($(this).children());
})})(div);
</script>
-->
</body>
</html>
The my-replace directive strips away the wrapping div of the ng-includes once their content loads.
The js code at the bottom is a quick debugger so I can see how the html was being interpreted as firebug light doesn't work with angularjs.
I've tried with multiple versions of bootstrap too
Why isn't the bootstrap working?
Possible related error from firebug: ... Cannot call methods on listview prior to initialization; attempted to call method 'option'
I am making this app that requires you to type the answer of a certain ´level´ to go to the next one. The answer is in a list and should only display on exact match for the search. Below is my html for the first two pages and my javascript for hiding the answer untill exact match is provided.
However it ONLY works on the first view (page) and doesn´t work on the second, third, fourth and so on! I really spent a loooong time trying to fix this and I am lost. The only thing that worked for me so far was a prefetch-data="true", but it only works to some extent and stops working after page 3. Other then that I´ve tried to implement many solutions I found here and there but none do what I want. I hope there is some simple thing I am doing wrong.
Why does the script only run on the first view and how do I fix it?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>PARestaurant</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="style" href="images">
<style type="text/css"></style>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- Page Index
Home Page
Level Two
Level Three
Level Four
-->
<!-- -----------------------------------------------------------Home Page----------------------------------------------------------- -->
<div data-role="page" id="232114125125124124" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2>Ready when you are!</h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true"
data-filter-reveal="true" data-inset="true"
data-filter-placeholder="">
<li data-filtertext="Green">You are a genius!</li>
</ul>
</div>
</div>
<div id="blue"></div> <h2>+</h2> <div id="yellow"></div>
</div>
<div data-role="footer" align="center">
<h1>Level 1</h1>
</div>
</div>
<!-- -----------------------------------------------------------Level Two----------------------------------------------------------- -->
<div data-role="page" id="32432532462362345325235235" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2> You know what to do! </h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-filter-placeholder="">
<li data-filtertext="Level 1">Click me to go back!</li>
<li data-filtertext="Level 3">Up you go!</li>
<li data-filtertext="Level 4">You have to struggle a bit</li>
<li data-filtertext="Level 5">Not so fast</li>
<li data-filtertext="Level 6">No No NO!</li>
<li data-filtertext="Level 7">Stop it...</li>
</ul>
</div>`enter code here`
<div><p>Where do you wanna go?<p></div>
</div>
</div>
<div data-role="footer" align="center">
<h1>Level 2</h1>
</div>
</div>
JAVASCRIPT BELOW
exactMatch = function( text, searchString ) {
return !( text.toLowerCase() == searchString );
};
$(function () {
$(".whatever").listview('option', 'filterCallback', exactMatch);
});
}
Instead of
$(function () {...
Try something like this:
$(document).on( "pageinit", function( e ) {
$(e.target).find(".whatever").listview('option', 'filterCallback', exactMatch);
});
pageinit runs once as each page you visit is initialized for the first time.
I'm having problems implementing the One Page Nav and scrollTo jQuery plugins (Seems I need more reputation to post the links, so I hope you know which plugins I'm referring to). I'm a complete beginner to Javascript and I just want the links of my navigation bar to have a scrolling effect as seen here.
I've pasted the entire code of my html page below as I'm not sure where I've gone wrong. For now I've left in the ready functions from both plugins (although I have tried with only one - and also tried attaching it to 'div#nav', '#navbar', etc.).
<html>
<head>
<meta charset="utf-8">
<title>deepeedesigns - Portfolio site of Web Designer Dan Pierce</title>
<link rel="icon" type="image/png" href=""><!--favicon-->
<meta name="description" content=""><!--description that appears under Google listing-->
<meta name="keywords" content="">
<meta name="robots" content="">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>
</head>
<body>
<div id="header">
<div class="container">
<div id="navbar">
<div id="logo"><img src="images/logo.png"></div>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--navbar-->
</div><!--container-->
</div><!--header-->
<div id="home">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--home-->
<div id="about">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--about-->
<div id="portfolio">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--portfolio-->
<div id="contact">
<div class="background">
<div class="container">
</div><!--container-->
</div><!--background-->
</div><!--contact-->
$(document).ready(function() {
$('#nav').onePageNav();
});
$(document).ready(function() {
$('#nav').$scrollTo();
});
</body>
</html>
Where is your opening <script> and closing </script> tag for the jQuery?
Update:
Why declare $(document).ready twice?
$(document).ready(function() {
$('#nav').onePageNav();
$('#nav').scrollTo();
});
You do not need to use Jquery to scroll top. You can use it on window object
window.scrollTo(0,0);
But if you want to animate or want to perform scroll on specific element, then you can use jquery
$("html, body").animate({ scrollTop: 0 }, "slow");
In your code, you have to write your javascript code inside <script></script> tag.
There is an spelling mistake of scrollTo instead of $scrollTo
Back To Top Link
HTML
<a class="btn-go-top" href="javascript:window.scrollTo(0,0);">Go to top</a>
CSS
.btn-go-top {
position:fixed;
bottom: 20px;
right: 20px;
}
Within a jQuery Mobile page, I have a div which needs to be refreshed after a php mysql JSON call is made. This call updates the number of entries in a database. This update needs to be displayed within the div. I searched stackoverflow and found .listview("refresh"), .trigger("create") and other potential solutions but could not get to work. I think .listview("refresh") is not applicable since I am not using a list.
The main page has two mobile pages within it #outerwrap0 and #outerwrap1:
<html lang="en">
<head>
<title></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="models/site-templates/themes/whiteBackNavy.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/shuffleMainJplayerJQM1.1.js"></script>
</head>
<body>
<!--*** PAGE 0 ***-->
<div data-role="page" id='outerwrap0' class="outerwrap" data-url="/account_m.php">
<div class="mineBox">
... php ...
</div
</div
<!--*** PAGE 1 ***-->
<div data-role="page" id='outerwrap1' class="outerwrap" data-url="/account_m.php">
<div class="mineBox">
... php ...
</div
</div
the applicable portion of the shuffleMainJplayerJQM1.1.js javascript, wherein the php is updated and code should be called to refresh the div is:
$(".adder").click(function() {
$.ajax({
url: 'AddToMine1.2.php?id=' + currentId,
type: 'POST',
dataType:'json',
success : function (result) {
var errorCode = (result['errorCode']);
switch (errorCode) {
case 0: alert(result['errorMess']);
break;
case 1: alert(result['errorMess']);
break;
case 2: break;
}
},
error : function () {
alert("error");
}
});
// not working - would like to refresh mineBox div here
$(".mineBox").trigger("create");
});
Here is the contents of .mineBox after rendering:
<div class="mineBox">
<p align=center>
<img src="../images/mine_block_full.jpg" width="14%" align="absmiddle" />
</p>
<p align=center><img src="../images/mine_block_full.jpg" width="14%" align="absmiddle" />
</p>
<div data-role="popup" id="popupMenuPM1" data-theme="a" data-overlay-theme="a">
<ul data-role="listview" data-inset="true" >
<li data-role="divider" data-theme="a">Be</li>
<li>Play</li>
</ul>
</div>
<div data-role="popup" id="popupMenuPM2" data-theme="a" data-overlay-theme="a">
<ul data-role="listview" data-inset="true" >
<li data-role="divider" data-theme="a">Want Girl</li>
<li>Play</li>
</ul>
</div>
</div>
Your assistance is greatly appreciated. Thank You!