I know this question has been asked several times, but i want to load a panel dynamic for all pages and it doesn't work.
Sometimes the css style is not loading or the panel does not open..
Any suggestions? ;(
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var panelHtml = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
});
$(this).append(panelHtml);
$("#panel_" + this.id).panel();
$("#panel_" + this.id).panel().enhanceWithin();
$("#panel_" + this.id).enhanceWithin();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
</body>
</html>
My panel.html
<ul data-role="listview" data-theme="g" data-divider-theme="g">
<li data-role="list-divider">Panel</li>
<li>Page1</li>
<li>Page2</li>
<li>Pag3</li>
</ul>
Thank you for your tips... .one('pagebeforecreate',
It is not easy to load the same header and / or footer in all pages.
Finding the right event is really difficult.
I modified your solution a bit, it's more concise and can be faster.
$(document).one('pagebeforecreate', function () {
$.get('header.html').success(function(htmlHeader){
$.get('footer.html').success(function(htmlFooter){
$(htmlHeader).prependTo($('[data-role="page"]'));
$(htmlFooter).appendTo($('[data-role="page"]'));
$('body').enhanceWithin(); // All pages in once
});
});
});
#thanks to ezanker
- i didnt know that a external panel exist, thanks
- i tested it on jsfiddle and it worked but i didnt worked local, i dont know why
thats my solution
its a bit silly when you know external panels exist, but here it is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="header">').load("templates/header/header.html", function () {
$("#" + id).prepend(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">').load("templates/footer/footerUp.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="popup" id="popup_' + this.id + '" data-theme="a" class="ui-corner-all">').load("templates/popup/type_1/popup.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page1").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page2").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page3").popup("open")'>Open PopUp</a>
</div>
</div>
</body>
</html>
Related
i am using this animation on my website.
https://codepen.io/alvarotrigo/pen/YzYbdxV
I'm trying to figure out how to load a individual file into the content of each box.
So every box doesn't have the same content.
I've already written a method in my JS file:
function loadHTML (id, filename) {
console.log(`div id: ${id}, filename: ${filename}`);
let xhttp;
let element = document.getElementById(id);
let file = "/electronic_projects/" + (filename.replace(/\s/g, '_') + ".html").toLowerCase();
if (file) {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
console.log(this.responseText);
if (this.status == 200) {element.innerHTML = this.responseText;}
if (this.status == 404) {element.innerHTML = "<h1>Page not found.</h1>";}
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
It takes the ID of my div and the HTML file, which i want to load.
It does work if i give it the exact name of the file.
What i can't get to work is, that it loads a html file, which is the same as the boxes name (declared on top of the JS file).
Does anybody have an idea for that?
Thanks very much!
This is my modified html approach:
<!doctype html>
<html>
<style>
#ep {
text-decoration: underline #0088a9;
text-underline-offset: 5px;
}
</style>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" href="projects_style.css" type="text/css">
<script src="electronic_projects_script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electronic Projects</title>
</head>
<body>
<header>
<a class="logo" href="index.html">COPPER CREW</a>
<nav>
<ul class="nav_links">
<li><a id="ep" href="electronic_projects.html">Electronic Projects</a></li>
<li><a id="sp" href="software_projects.html">Software Projects</a></li>
<li><a id="a" href="">About</a></li>
</ul>
</nav>
</header>
<div class="container" ng-class="{'no-scroll': selected.length}" ng-app="app" ng-controller="mainCtrl">
<div class="page">
<div class="grid">
<div class="grid-item" ng-repeat="item in boxes">
<box class="box" id="box" item="item" on-select="selectBox" ng-class="{'selected': selected[0].item.name == item.name}" onclick="loadHTML('content', filename=selected)"></box>
</div>
</div>
</div>
<div class="fullscreen-background top-up" ng-show="selected.length" ng-style="{'background-image': 'url(' + selected[0].item.image + ')'}"></div>
<div class="scroller" ng-show="selected.length">
<a class="close-button" ng-click="clearSelection()">
<i class="material-icons">close</i>
</a>
<h1 id="name">{{selected[0].item.name}}</h1>
<div big-box ng-repeat="item in selected" class="box on-top" position="item.position" selected="item.item">
<img ng-src="{{item.item.image}}" alt="" />
<div class="content" id="content">
</div>
</div>
</div>
</div>
</body>
</html>
Lately I've been having terrible trouble trying to get audio to play on my android device via my phonegap build. I've seen many others have had several issues (mainly pertaining to the correct file path) but none of the solutions I've come across have led to a result. Here is my script for loading and playing the audio:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Audio</title>
</head>
<body>
<div class="container-fluid">
<div class="col-xs-12 col-md-12">
<div class="s-it">Tap Here</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4"></div>
<div class="col-xs-4 col-md-4">
<div class="container">
<span style="display:none;" id="vX"></span>
<span style="display:none;" id="vY"></span>
<span style="display:none;" id="vZ"></span>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div id="sbell">
<img src="img/bell.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="s-text">Test</div>
</div>
<div class="col-md-12 col-xs-12">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="well">
<span class="sts">
<img src="img/shake-banner.png">
</span>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
var myMedia1 = null;
var myMedia2 = null;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady () {
var src1 = '';
var src2 = '';
if (device.platform == 'Android') {
src1 = '/android_asset/www/audiomp3/audio1.mp3';
src2 = '/android_asset/www/audiomp3/audio2.mp3';
}
myMedia1 = new Media(src1, onSuccess, onError);
myMedia2 = new Media(sec2, onSuccess, onError);
myMedia1.addEventListener('ended', function () {
setTimeout(function () {
$('#sbell').removeClass('animate-bell');
}, 2000);
setTimeout(function () {
$('.s-text').fadeOut(200);
}, 500);
}, false);
}
function onSuccess () {
alert("Audio Loaded");
}
function onError (e) {
alert(e.message);
}
window.ondevicemotion = function (event) {
var accX = event.accelerationIncludingGravity.x;
var accY = event.accelerationIncludingGravity.y;
var accZ = event.accelerationIncludingGravity.z;
if (accX >= 8 || accX <= -8) {
myMedia2.play();
}
document.getElementById('vX').innerHTML = accX;
document.getElementById('vY').innerHTML = accY;
document.getElementById('vZ').innerHTML = accZ;
};
$(document).ready(function () {
$('#sbell').click(function(event){
$(this).addClass('animate-bell');
$('.s-text').css('color', 'red').fadeIn(300);
myMedia1.play();
});
});
</script>
</body>
#ZyOn (deleted previous comment)
You can use my Media Demo example to find your issue.
Phonegap Demo Apps (core)
The source is on github. It contains sound samples too. I have additional notes, if you need them.
Also, your app.initialize() should be called AFTER the deviceready event.
Using jeasyui how could i post the result of the tree elements on the iframe inside the region:center?
Actual code based on Complex Layout demo from jeasyui.com:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/jeasyui/demo.css">
<script type="text/javascript" src="/jeasyui/jquery.min.js"></script>
<script type="text/javascript" src="/jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Test</h2>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:auto;height:565px">
<div data-options="region:'west',split:true", title='Menu' style="width:200%;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Servers Index" style="padding:5px;">
<ul class="easyui-tree"
data-options="
url:'jj.json',
method:'get',
animate:true,
formatter:function(node){
s = node.text;
if (node.server){
s = '<a href=\'http://'+ node.server +'\'>'
+ node.server + '</a>';
}
return s;
}">
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:'Output',
iconCls:'icon-ok',href:''"
name="center" style="padding:10px">
<iframe name="iFrame" width="100%" height="90%"frameborder='0'>
</iframe>
</div>
<div data-options="region:'south',split:true" style="height:50px;">
</div>
</div>
</body>
</html>
json content:
[{
"id":1,
"text":"pick one",
"children":[{
"id":11,
"server":"www.google.com"
},{
"id":12,
"server":"www.altavista.com"
}]
}]
Thanks in advance.
I was able to solve it by simply adding target=\'iFrame\':
<ul class="easyui-tree"
data-options="
url:'jj.json',
method:'get',
animate:true,
formatter:function(node){
s = node.text;
if (node.server){
s = '<a href=\'http://'+ node.server +'\' target=\'iFrame\'>' + node.server + '</a>';
}
return s;
}
">
</ul>
I am trying to use lightbox on one of my web pages, but after loading the jquery library and lightbox.js as well as lighbox.css, when an image associated with lightbox is clicked, it is opened in a new window. I have found that if I disable my standard jquery file, lightbox works fine. I'm pretty new to javascript and Jquery, can anyone see why this might be interfering with lightbox?
JS:
$(document).ready(function(){
$("#menuButton").click(function(){
$('#sideContent').toggleClass('hide');
$('nav').toggleClass('hide');
$('#key').toggleClass('big');
$('#pageSize').toggleClass('big');
$('#returnContainer').toggleClass('hide');
$('#returnText').toggleClass('hide');
});
});
$(document).ready(function () {
$('#collapseGallery').click(function () {
$('#galleryImg').toggleClass('hide');
})
})
$(document).ready(function () {
var $window = $(window),
$key = $('#key'),
topOffset = $key.offset().top;
$window.scroll(function () {
$key.toggleClass('fixed', $window.scrollTop() > topOffset);
});
});
$(document).ready(function () {
$('#returnContainer').click(function () {
$("html, body").animate({ scrollTop: 0 }, 500);
})
})
HTML (of the page my gallery is on):
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="css/style.css" /> -->
<link rel="stylesheet" type="text/css" href="css/lightbox.css" />
<script src="js/jquery-1.11.0.js"></script>
<!-- <script src="js/js.js"></script>-->
<title>School</title>
</head>
<body>
<?php include ("aside.php"); ?>
<div id="pageSize">
<header class="pageHeader">
Schoolwork
</header>
<div class="contentHeader">
<h1>Work From CCC</h1>
</div>
<div class="content">
<div class="hLine"></div>
<p>Some text.</p>
<br>
<div>
<h1 id="collapseGallery">Contemporary Issues in Painting</h1>
<div id="galleryImg" class="hide">
<?php include 'images.php'; ?>
</div>
</div>
</div>
</div>
</body>
<script src="js/lightbox.js"></script>
</html>
Can anyone see where I'm going wrong?
I am currently working on a project that deals with feed from a website.
I have successufully gotten the feed, but my challenge is getting the content and title of the feed when a user click on the feed link rather than taken the user to the feed site.
I have tried using different method to get the solution, but none works.
Below is my latest code (Jquery Mobile)
(function($){
$.fn.FeedEk=function(opt){
var def={FeedUrl:'', MaxCount:5, ShowDesc:true, ShowPubDate:true, ShowFullContent:true};
if(opt){
$.extend(def,opt)
}
var idd = $(this).attr('id');
if(def.FeedUrl==null || def.FeedUrl==''){
$('#'+idd).empty();
return;
}
var pubdate;
$('#'+idd).empty().append('<div style="text-align:center; margin: auto;"><img src="loader.gif" class="loader" /></div>');
$.ajax({
url:'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+def.MaxCount+'&output=json&q='+encodeURIComponent(def.FeedUrl)+'&callback=?',
dataType:'json',
success:function(data){
$('#'+idd).empty();
$('#post').empty();
var output = '<ul data-role="listview" data-filter="true">';
$.each(data.responseData.feed.entries,function(i,entry){
var i =new Array(i);
for(j=0;j<=i;j++)
{
var id = j;
}
var title =new Array(entry.title);
var content =new Array(entry.content);
for(t=0;t<title.length;t++){
for(c=0;c<content.length;c++){$('#post').append(title[t]+'<br/>'+content[c])}
}
//while(id ==
//if(i == id
//var post = '<div><h3>'+entry.title+'</h3></div>';
//post += '<div>Post content'+entry.content+'</div>';
output += '<li>';
output += ''+entry.title+'';
/*if(def.ShowPubDate){
pubdate=new Date(feed[0].entry.publishedDate);
output += '<br/><span class="ItemDate">'+pubdate.toLocaleDateString()+'</span';
}
if(def.ShowDesc){
output += '<br/><span class="ItemDesc">'+feed[0].entry.contentSnippet+'</span>';
}*/
output += '</li>';});
console.log(data.responseData.feed.entries);
output += '</ul>';
$('#'+idd).html(output);
if($('.'+id).click() == true){
$('#post').empty();
var postTitle = title[id];
var postContent = content[id];
$('#post').append('<div><h3>'+postTitle+'</h3></div><div>'+postContent+'</div>');
}
}
})
}
})
(jQuery);
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>News on the GO!</title>
<link href="theme/news.min.css" rel="stylesheet" />
<link href="theme/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet" />
<link href="theme/FeedEk.css" rel="stylesheet" type="text/css" />
<script type="application/javascript" src="js/jquery1.7.2-min.js" ></script>
<script type="application/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="application/javascript" src="js/FeedEk.js"></script>
<link href="theme/custom.css" rel="stylesheet" type="text/css" />
<script type="application/javascript" src='js/main.js'></script>
<script type="application/javascript">
$(document).ready(function() {
//latest
$("#ipaid").FeedEk({
FeedUrl : 'http://ipaidabribenaija.com/news?format=feed',
MaxCount : 7,
ShowDesc : true,
ShowPubDate:true,
ShowFullContent:true
});});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-theme="a">
<h2>Recent News</h2>
About
</div><!-- /header -->
<div class="imghome">
<img src="images/news.png" alt="news" width="300" height="200" />
</div>
<nav data-role="navbar">
<ul>
<li><a href="#latest" data-theme="a" data-transition="flip" >Local News</a></li></ul>
</nav>
<!--<div data-role="content" >
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="a"></div><!-- /footer -->
</div><!-- /Page home -->
<div data-role="page" id="latest" data-title="Local News">
<div data-role="header" data-position="fixed" data-id="ipaid_header" data-theme="a">
<h2>Local News</h2>
Back
</div><!-- /header -->
<div data-role="content" >
<div id="ipaid">
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ipaid_footer" data-theme="a">
<div data-role="navbar" data-theme="a">
<ul>
<li>Home</li>
<li>Politics</li>
<li>Sports</li>
<li>Business</li>
</ul>
</div><!-- /Footernavbar --></div><!-- /footer -->
</div><!-- /Page Latest --></body>
</html>
As far as I understood. You want to show each news feed on a separate page on your webpage, and prevent the link from opening a new window (leaving your webpage).
You could do the following, of course it needs some tuning and CSS styling, which can be done easily. The below code, prevents opening the link a new window, - using preventDefault() - it copies feed details (title, image, full article..etc) and appending them to a new page dynamically.
Each page has an auto-generated ID, in case you want to navigate between them using Swipe events or any other methods.
Working example
Code:
var pageid = 0;
$('#ipaid').on('click', 'a', function (e) {
pageid++;
e.preventDefault();
var clicked = $(this);
var root = clicked.closest('li');
var linkto = clicked.attr('href');
var title = clicked.text();
var date = clicked.parent('div').next('div').text();
var linkdiv = root.find('div.itemTitle');
var datediv = root.find('div.itemDate');
var contentdiv = root.find('div.itemContent');
var image = contentdiv.first('div').find('img').attr('src');
var article = '';
contentdiv.find('p').each(function () {
article += $(this).text();
});
var newPage = $("<div data-role=page id='page" + pageid + "'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>" + title + "</h1></div><div data-role=content><p>Date:" + date + "</p><img src='" + image + "'></div><div class='article'><p>" + article + "</p></div></div></div");
newPage.appendTo($.mobile.pageContainer);
$.mobile.changePage('#page' + pageid);
});
I think you simple need jFeed. Sample code from the jFeed site:
jQuery.getFeed(options);
options:
* url: the feed URL (required).
* data: data to be sent to the server. See jQuery.ajax data property.
* success: a function to be called if the request succeeds.
The function gets passed one argument: the JFeed object.
Example:
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});