I'm trying to use jQuery Mobile for desktop. I am building a social networking service and I want to use a left and right panel for each groups and message usage.
What I want is the side panel to appear when I hover over it's respective header bar button, like the sidebar in Google+.
Here is my code:
jsFiddle
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!--jqm cdn-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<!--groups panel-->
<div data-role="panel" id="groups-panel" data-position="left" data-display="overlay">
LPS
</div>
<!--friends panel-->
<div data-role="panel" id="friends-panel" data-position="right" data-display="overlay">
LPS
</div>
<div data-role="header" data-theme="b">
Groups
<h1>My Title</h1>
Friends
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
How can I do that? Any help is appreciated.
add this code to your page
$('#groups-panel').mouseleave(function () {
$(this).panel("close");
});
$("#groups-button").hover(function () {
$('#groups-panel').panel("open");
});
$('#friends-panel').mouseleave(function () {
$(this).panel("close");
});
$("#friends-button").hover(function () {
$('#groups-panel').panel("open");
});
Fiddle
Related
i have a project formed by html, js, bootstrap, angularjs.
my site have many pages that all pages have a template.
now, i think header ,navigation , footer and etc isn't reusable and i should write those any time.
example in JSF :
<ui:composition template="/WEB-INF/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="title">
New page title here
</ui:define>
<ui:define name="content">
<h1>New content here</h1>
<p>Blah blah</p>
</ui:define>
</ui:composition>
I do not know if I can use Angular to do this.
Thank you for any help you receive.
this is sample of my page:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>main template</title>
<meta charset="utf-8">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
...
<link rel="stylesheet" type="text/css" href="app/styles/bootstrap4/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/styles/responsive.css">
...
</head>
<body>
<script src="app/js/jquery-3.2.1.min.js"></script>
<script src="app/styles/bootstrap4/bootstrap.min.js"></script>
....
<div class="super_container" ng-controller="showcaseController">
<!-- Header -->
<header class="header trans_300">
<!-- Top Navigation -->
<div class="top_nav">
<div class="container">
....
</div>
</div>
<!-- Main Navigation -->
<div class="main_nav_container">
<div class="container">
<div class="row">
....
</div>
</div>
</div>
</header>
//content of page like this
<div include-html="queryManagement.html"></div> // <<---- url clicked
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/elasticsearch/elasticsearch.angular.js"></script>
<script src="app/apps/app.js"></script>
.....
</body>
</html>
tip:
Pages are clicked on the bar, and they look like they are on the page.
But in any case, the layout page is loaded as a main page, which opens
the content of the selected page within itself.
i found solution with angularjs.
in layout page:
<html lang="en" ng-app="FirstPage">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="app/styles/bootstrap4/bootstrap.min.css">
....
</head>
<body>
<script src="app/styles/bootstrap4/bootstrap.min.js"></script>
.....
<div class="super_container" ng-controller="layout">
<!-- Header -->
<header class="header trans_300">
<!-- Top Navigation -->
<div class="top_nav">
<div class="container">
......
<nav class="navbar">
<ul class="navbar_menu">
look ng-click <li>link 1</li>
look ng-click <li>link 2</li>
</ul>
</div>
</nav>
....
</div>
</div>
</header>
<!--<div ng-bind-html="contentUri"/>-->
<div id="ext-content" ng-include="contentUri"/> //<== use ng-include for content
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script src="app/apps/app.js"></script>
....
</body>
</html>
and then in js:
app.controller("layout", function ($scope, client, esFactory) {
$scope.contentUri = '';
$scope.loadContent = function (uri) {
$scope.contentUri = uri;
}
});
this worked for me
i tried many time to run this code but every time it appear in a bad manner i want angular make its affect like this demo http://wowslider.com/angular-slider-collage-demo.html. please help me i tried many time without good result.can you put aworked link to this demo
Blockquote
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Http://wowslider.net/</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Made with WOW Slider - Create beautiful, responsive image sliders in a few clicks. Awesome skins and animations. Http://wowslider.net/" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7;margin:0" >
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1" >
<div class="ws_images" ng-controller="HelloController">
<ul>
<li ng-repeat="img in allimages"><img ng-src="data1/images/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132" id="wows1_0"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a ng-repeat="img in allimages" href="#" title="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"><span><img ng-src="data1/tooltips/{{img.name}}" alt="2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132"/>1</span></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">http://wowslider.net/ by WOWSlider.com v8.7</div>
<div class="ws_shadow"></div>
</div>
<!-- End WOWSlider.com BODY section -->
<script type="text/javascript" src="engine1/angular.js"></script>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.allimages = [{name:'2016chevroletcruzespiedcompletelyuncoverednewscaranddriverphoto658949s217x132.jpg'},{name:'2016chrysler300srtspieditsalivenewscaranddriverphoto658864s217x132.jpg'}];
});
</script>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</body>
</html>
I'm trying to set up a tabbed navigation bar but it's not hiding the content from the other tabs.
On a similar note, creating a new page doesn't work in the same way. It shows the content of the other page as if I was writing it normally.
<!-- Chat Display and Tabs -->
<div id="tabs" data-role="tabs">
<div data-role="navbar">
<ul>
<li>Global Chat</li>
<li>Alliance Chat</li>
<li>Private Chat</li>
</ul>
</div>
<div id="#globalChat" class="ui-body-d ui-content">
<div id="incomingMessages" name="incomingMessages" class="msgContainerDiv" ></div> <!-- Global Chat Display -->
</div>
<div id="#allyChat" class="ui-body-d ui-content">
<div id="incomingAMessages" name="incomingMessages" class="msgContainerDiv" ></div> <!-- Global Chat Display -->
</div>
<div id="#privateChat" class="ui-body-d ui-content">
<div id="incomingPMessages" name="incomingMessages" class="msgContainerDiv" ></div> <!-- Global Chat Display -->
</div>
</div>
Head Tag:
<head>
<title>Mod Panel</title>
<meta http-equiv=content-type content=text/html;charset=utf-8>
<meta name=viewport content=width=device-width>
<meta name=viewport content=initial-scale=1.0>
<meta name=viewport content=user-scalable=no>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<link href="css/toastr.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="js/md5.js"></script>
<script src="js/common.js"></script>
<script src="js/toastr.js"></script>
<script src="js/dateFormat.js"></script>
<script src="js/main.modpanel.js"></script>
<script src="js/blacklist.js"></script>
</head>
Plunker
Your issue is with the ids of your #globalChat, #allyChat and #privateChat divs. When setting an id, the hash (#) shouldn't be prepended to the name, only when referring to the id is the hash prepended.
For instance:
<div id="#globalChat" class="ui-body-d ui-content">
should be
<div id="globalChat" class="ui-body-d ui-content">
in order to be referred to by
Global Chat
setting id='#globalChat means you need to reference ##globalChat (I'm not even sure if this will work).
I've forked the plunker and the tabs work fine with the updated ids.
I wrote a jQuery code that have all the pages code in one html file and I wanted to add a slider in the left side that will show the pages on.
It works in the home page but it's not working for the other pages? Nevertheless the code is similar. I don't know what to change or add to make working for all of the pages.
My HTML header:
<head>
<meta charset="utf-8">
<title>WELCOME</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.sidr.dark.css">
<script>
$(document).ready(function(){
{$(".p1").hide()};
$("#hide1").click(function(){
$(".p1").hide();
});
$("#show1").click(function(){
$(".p1").show();
});
});
</script>
<script>
$(document).ready(function(){
{$(".p2").hide()};
$("#hide2").click(function(){
$(".p2").hide();
});
$("#show2").click(function(){
$(".p2").show();
});
});
</script>
<script>
$(document).ready(function(){
{$(".p3").hide()};
$("#hide3").click(function(){
$(".p3").hide();
});
$("#show3").click(function(){
$(".p3").show();
});
});
</script>
<script>
$(document).ready(function() {
$('#simple-menu1').sidr();
});
</script>
<script>
$(document).ready(function() {
$('#simple-menu2').sidr();
});
</script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/mobile.css" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
And here is the home page slider (the one that works):
<!-- Home Page -->
<div data-role="page" id="page">
<!-- Header -->
<div data-role="header">
<div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div>
<div id="sidr">
<!-- Your content -->
<ul class="center my-font">
<li>
Page 1
</li>
<li class="active">
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
<h1 class="my-font"> Welcome to the home page</h1>
</div>
Here is the code for the slider for the one of the pages (It didn't work):
<!-- Page (2) -->
<div data-role="page" id="page">
<!-- Header -->
<div data-role="header">
<div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div>
<div id="sidr">
<!-- Your content -->
<ul class="center my-font">
<li>
Page 1
</li>
<li class="active">
Page 2
</li>
<li>
Page 3
</li>
</ul>
</div>
<h1 class="my-font"> Welcome to the home page</h1>
</div>
Have you try to replace $ with jQuery . Or either you can check error on console .
I'm kinda new to jQuery/HTML5 stuff, so I'm running into some problems. Hope you can help.
I'm loading a local json file and want to add the items of it to a list. This works just fine. But, the list is not using the jQuery styling?
I tried it without loading the json file and instead I put the data directly in the code and it worked. What might be my problem?
Here is the code which does not style correct:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Zurück
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
Info
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function()
{
$(document).ready(function(){
$.getJSON("institute.js",function(data) {
$.each(data.institute,function(i,el){
$("<li><a href='#'>"+el.id+". "+el.name+"</a> </li>").appendTo("#taskList");
});
});
});
})
</script>
</body>
</html>
And here is the code which gives me the correct styling
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tuBS Energie App</title>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/>
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Zurück
<h1>tuBS Energie App</h1>
</div>
<div data-role="content">
<h3>Institut für Nachrichtentechnik</h3>
<ul id="taskList" data-role="listview" data-filter="true" data-filter-placeholder="Suche nach Institut..." data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
Info
</div>
</div>
<script type="text/javascript" charset="utf-8">
var institute_json =
[
{"id":"1","name":"Adaptronik und Funktionsintegration"},
{"id":"2","name":"Analysis und Algebra"},
{"id":"3","name":"Angewandte Mechanik"},
{"id":"4","name":"Angewandte Physik"},
{"id":"5","name":"Anorganische und Analytische Chemie"},
{"id":"6","name":"Architekturbezogene Kunst (IAK)"},
{"id":"7","name":"Automobilwirtschaft u Industrielle Produktion"},
];
$.each(institute_json,function(i,el)
{
$("<li><a href='#'>"+el.id+". "+el.name+"</a></li>").appendTo("#taskList");
});
</script>
</body>
</html>
When you add elements dynamically to the listview, after rendering you need to refresh it.
$("ul").listview("refresh");
Can you give us the content of institute.js
Try this :
$.getJSON("institute.js",function(data) {
$.each(data,function(i,el)