My Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$("#menu").accordion();
});
</script>
</head>
<body>
<div id="menu">
<h3>Section 1</h3>
<div>
<p>I'm the first section!</p>
</div>
<h3>Sectio 2</h3>
<div>
<p>Tab 2</p>
</div>
<h3>Section 3</h3>
<div>
<p>Tab 3</p>
</div>
</div>
</body>
</html>
I have tried several times but the page does not show up as expected in Google Chrome.Please could someone help me.
Add http in your link to jQuery UI:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
It throwing error because the library is not loading properly.
Related
Im trying to make a swipe event , on page 1 its can be swipe to the page 2 , but from page 2 its not working , what is wrong here ? its only works on page 1 , what shall i do ?
(Page mostly code , i need more char)
Im trying to make a swipe event , on page 1 its can be swipe to the page 2 , but from page 2 its not working , what is wrong here ? its only works on page 1 , what shall i do ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("p").on("swiperight",function(){
$('#page1').fadeOut();
$('#page2').fadeIn();
$('#page3').fadeOut();
});
});
$(document).on("pagecreate","#page2",function(){
$("p").on("swiperight",function(){
$('#page1').fadeOut();
$('#page2').fadeOut();
$('#page3').fadeIn();
});
});
$(document).on("pagecreate","#page3",function(){
$("p").on("swiperight",function(){
$('#page1').fadeOut();
$('#page2').fadeOut();
$('#page3').fadeIn();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">PAGE 1</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">PAGE 2</p>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="main" class="ui-content">
<p style="border:1px solid black;margin:5px;">PAGE 3</p>
</div>
</div>
</body>
</html>
$(document).on("pagecreate","#page1",function(){
console.log("page1");
$("#p1").on("swiperight",function(){
console.log("page 1's p");
//$('#page1').fadeOut();
$('#page1').fadeOut();
$('#page2').fadeIn();
$('#page3').fadeOut();
});
});
$("#p2").on("swiperight",function(){
console.log("page 2's p");
$('#page1').fadeOut();
$('#page2').fadeOut();
$('#page3').fadeIn();
});
$("#p3").on("swiperight",function(){
console.log("page 3's p");
$('#page1').fadeOut;
$('#page2').fadeOut;
$('#page3').fadeIn;
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="main" class="ui-content">
<p id="p1" style="border:1px solid black;margin:5px;">PAGE 1</p>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content">
<p id="p2" style="border:1px solid black;margin:5px;">PAGE 2</p>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="main" class="ui-content">
<p id="p3" style="border:1px solid black;margin:5px;">PAGE 3</p>
</div>
</div>
</body>
</html>
see i have used console.log to slove error. you have used all document event that not going to invoke just use one and you have used all p event that also not work instead use id for every p. i hope you satisfied.
I have written html/css code and then added another file to include the jquery library and my own js code (in the file scripts.js).
My code does not work if I keep it in the separate scripts.js file, but it does work if I apply it in the <scripts></script> element within index.html.
Why is this and how can I solve the problem?
My HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script src="js/scripts.js" type='text/javascript'></script>
</head>
<body>
<div id="wrapper">
<header id="titel">
<h1>Welcome</h1>
</header>
<!-- Menu -->
<nav id="menu">
<ul>
<li> Introductie </li>
</ul>
</nav>
<!-- Manual -->
<div id="content">
<!-- Intro Slide -->
<article id="intro">
<h2>Introductie</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/>
</figure>
<p>Zonder moeite je hart meten? Dat kan...</p>
</article>
<!-- Slide 1 -->
<article id="probleem">
<h2>Het Probleem</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/>
</figure>
<p>Het probleem uitleggen</p>
</article>
</div>
<footer>
To the top!
</footer>
</div>
</body>
</html>
Browser Console Log:
SyntaxError: Unexpected token ')'. Expected an opening '(' before a
function's parameter list.
But it does work, if I do it like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hartmeting</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<script src="js/jquery-3.1.1.js" type='text/javascript'></script>
<script type='text/javascript'>
$( document ).ready(function() {
$('content').hide();
});
</script>
</head>
<body>
<div id="wrapper">
<header id="titel">
<h1>Welcome</h1>
</header>
<!-- Menu -->
<nav id="menu">
<ul>
<li> Introductie </li>
</ul>
</nav>
<!-- Manual -->
<div id="content">
<!-- Intro Slide -->
<article id="intro">
<h2>Introductie</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Intro Afbeelding"/>
</figure>
<p>Zonder moeite je hart meten? Dat kan...</p>
</article>
<!-- Slide 1 -->
<article id="probleem">
<h2>Het Probleem</h2>
<figure>
<img src="http://placehold.it/150x150" , alt="Eerste Afbeelding"/>
</figure>
<p>Het probleem uitleggen</p>
</article>
</div>
<footer>
To the top!
</footer>
</div>
</body>
</html>
you're missing the parenthesis after function
$(document).ready(function(){
$("#content").hide();
});
Your syntax seems to be right (well, yes, you already fixed that though). Yet your jQuery selector is wrong. In order to hide an html element through it's id you need the #prefix. That being said, your .hide() should look like this:
$('#content').hide();
And also, here's the whole snippet:
$(document).ready(function() {
$('#content').hide();
});
Demo
The correct syntax would be:
$(document).ready(function(){
$("#content").hide();
});
I am creating a page for the transition.
Clicking on the page to navigate to another page - works on Firefox, but it doesn't on Chrome.
Error is showing :
Uncaught SecurityError: Failed to execute 'replaceState' on 'History':
A history state object with URL 'file:///C:/Users/athite/Desktop/DEMO/page.html' cannot be created in a document with origin 'null'.**
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the link to see the slide effect.</p>
Slide to Page Two
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the link to go back. </p>
Go to Page One
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
The issue occured in jquery.mobile-1.4.5.min.js:3
Solution:
Add this script before import as follows:
<script>
$(document).bind('mobileinit',function(){
$.mobile.pushStateEnabled = false;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
So I layed out my entire site with HTML and CSS. I then did some javascript, namely to handle some tab switching. Everything was working great. When I went to wire up the data, rather than putting my entire site in a polymer element, I put an auto-binding template around the bulk of the HTML then just used smaller elements within. The data is all working great, but now that javascript stopped working.
When you look at the DOM it looks a bit off, I'm not very familiar with how the shadow-dom works, so I don't know if this is right, but within #document-fragment I see an exact duplicate of everything I see after #document-fragment (ie "top", "middle", "tabs", etc)
Here is the relevant javascript and the full HTML:
$('.tab').on('click', function() {
$('.tab').removeClass('selected');
$('.content').hide();
$(this).addClass('selected');
var t = $(this).html();
$('.' + t).show();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<link rel="import" href="elements/air-appName.html">
<link rel="import" href="elements/air-appPropertyList.html">
</head>
<body>
<div id="main">
<template is="auto-binding">
<core-ajax auto handleAs="json" url="app.json" response="{{app}}"></core-ajax>
<div id="top">
<img id="imgLogo" src="images/app_AIR.png">
<div id="itemHeader">
<img id="imgDataQuality" src="images/DataQuality0.png">
<air-appName id="lblTitle" name="{{app.name}}">Loading</air-appName>
</div>
</div>
<div id="middle">
<div id="left">
<input id="txtSearch" type="text">
<img id="btnSearch" src="images/btnSearch.gif">
<air-appPropertyList id="appProperties" props="{{app.props}}"></air-appPropertyList>
</div>
<div id="right">
<div id="tabContent">
<!--TODO: Tabs need to be more dynamic-->
<div id="tabs">
<span class="tab">General</span>
<span class="tab">Technical</span>
<span class="tab">Contacts</span>
<span class="tab">Links</span>
<span class="tab">Desktop</span>
</div>
<div class="content General">
This is the general tab
</div>
<div class="content Technical">
<table-servers serversUrl="{{app.associatedServers}}"></table-servers>
</div>
<div class="content Contacts">
This is the Contacts tab
</div>
<div class="content Links">
This is the links tab
</div>
<div class="content Desktop">
This is the desktop tab
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="itemFooter">
</div>
</div>
</template>
</div>
<script src="scripts/vendor/jquery-1.11.1.min.js"></script>
<script src="scripts/vars.js"></script>
<script src="scripts/functions.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/ready.js"></script>
</body>
</html>
The third tab is not showing any content but the first two work fine. Not sure what is wrong as I am following this example from the jQuery website. http://demos.jquerymobile.com/1.4.1/tabs/
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>Social</title>
</head>
<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true, active: false
});
});
</script>
<body>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="one" style="display:none;">
<p> content one </p>
</div>
<div id="two" style="display:none;">
<p> content two </p>
</div>
<div id="three" style="display:none;">
<p> content three </p>
</div>
</div>
</body>
</html>