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 .
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 am trying to implement a full calendar on my web page, although when I navigate to the page where it should be, it simply does not display.
Here is my code:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/fullcalendar")
#{
ViewBag.Title = "Index";
}
<h2>Forecasts</h2>
<div id='calendar'></div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
weekends: false // will hide Saturdays and Sundays
})
});
</script>
and here is what is in each of the rendering bundles:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(
"~/Scripts/moment.js",
"~/Scripts/fullcalendar.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/fullcalendar.css",
"~/Content/site.css"));
Libary Versions:
jquery - 1.11.3
moment - 2.11.2
fullcalendar - 2.4.0
bootstrap - 3.0.0
Any help is greatly appreciated.
EDIT: Added a snippet of the rendered HTML code below. Note: all sensitive information has been replaced with '#'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - ###</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/fullcalendar.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="/Resources/logo.png" width="75" height="35" alt="Logo" />
</a>
</div>
<p class="nav navbar-text navbar-right">
User: ###<br />
Date: ###
</p>
</div>
</div>
</div>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="container">
<ul class="nav navbar-nav">
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/fullcalendar.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.11.3.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/fullcalendar.js"></script>
<h2>#</h2>
<div id='calendar'></div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
weekends: false // will hide Saturdays and Sundays
})
});
</script>
<hr />
<footer>
<p>© 2016 - #.</p>
</footer>
</div>
<script src="/Scripts/jquery-1.11.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
I managed to fix my own problem, I believe there was some sort of conflict with fullcalendar and bootstrap/respond.js.
In my shared views folder, these scripts were being rendered at the end of the page (which I didn't realise).
I removed these and it worked fine.
Below shows the rendering bundle and below that shows the scripts that are part of that bundle.
Scripts.Render("~/bundles/bootstrap")
RenderSection("scripts", required: false)
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
I am trying to show silder using ng-repeat. But picture and other things in controller don't appear.
Here is my js code
angular.module('starter', [])
.controller('slider', function($scope) {
$(document).ready(function(){
$('.slider').slider({full_width: true});
});
$scope.pictures=[
{
img:"http://www.brics-info.org/wp-content/uploads/2015/08/Transmission-Lines.jpg,
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
},
{
img:"http://www.burns-group.com/images/uploads/projects/Amtrak-Zoo-Transmission-Line-3.jpg",
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
},
{
img:"http://www.sgceng.com/snp_lib/showpic.php?recordID=630×tamp=1204139644&table=sgcengco",
info:"Эрчим хүчний барилга угсралт",
desc:"Засвар, тестчилэл"
}
] ;
})
This is index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<div class="slider" ng-app="starter" ng-controller="slider">
<ul class="slides">
<li ng-repeat="picture in pictures">
<img ng-src="{{picture.img}}"> <!-- image -->
<div class="caption center-align">
<h3 class="black-text">{{picture.info}}</h3>
<h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
</div>
</li>
</ul>
</div><!--slider-->
why it doesn't appear?
You should include controller in your index.html page. and use ng-app="moduleName" and use ng-controller="yourController". say script.js your controller file.
<!DOCTYPE html>
<html data-ng-app='starter'> /* used your module name as ng-app name */
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script> /* load your controller file */
</head>
<body ng-controller="slider"> /* use your controller */
<h1>Hello Plunker!</h1>
<div class="slider">
<ul class="slides">{{pictures}}
<li ng-repeat="picture in pictures">
<img ng-src="{{picture.img}}"> <!-- image -->
<div class="caption center-align">
<h3 class="black-text">{{picture.info}}</h3>
<h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
</div>
</li>
</ul>
</div>
</body>
</html>
PLUNKER Demo Link
This is my html for a dropdown menu. Initially, in CSS the menu is on display: none; .
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
<!-- Load the CDN first -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- If CDN fails to load, serve up the local version -->
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.js"><\/script>');</script>
<script src="js/script.js"></script>
</body>
</html>
And this is my jQuery script:
// script.js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
The above jQuery does not work. However, if, inside the div I add a <p> tag with id= menuButton, it works perfectly fine. Could anyone please help me with this? I have been struggling for a while.
check this fiddle, I have corrected some issues in your markup such as making
Home</a>
to
Home
Your code work fine otherwise
There are a few problems in your code:
1. Wait for DOM
The problem is that your script is probably executed before the DOM is ready. You should trigger the script only once document is ready - i.e.:
$(document).ready(function() {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
Otherwise you are trying to add a click handler to a not-yet-existing #menuButton.
2. Fix the <a> tags
The following line of code
Home</a>
Should become:
Home
Do the same fix for other anchor tags as well.
Other than the markup issues in HTML, your code runs just fine as I have checked it via Jsfiddle https://jsfiddle.net/bryomckim/pmw7xjwf/
js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
css
#dropdown {
display: none;
}
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<!-- Load the CDN first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
</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.