I have a page that is using JavaScript to play mp3 files. The script has its own CSS which controls the look of that specific code. I have another CSS file that controls the look of the overall page. I need this script to fall in my container <div> to keep my pages looking consistent. The script's CSS is correctly altering the JavaScript and the global CSS is also impacting the overall page. The only problem is that the script code ignores the CSS which places it inside the container and content divs. Hence this script shows at the bottom when it should be inside the container before my footer.
How can I get this script to still follow the CSS from the overall page so all my pages are structured the same? When I take out the script code and just type some words, the text shows up in the correct place on the website.
HTML is something like this:
<html>
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
//header code
</div>
<div id="nav">
<ul>
//Navigation code
</ul>
</div>
<div id="content">
<script type="text/javascript">
$(document).ready(function(){
var description = 'Example text'
$('body').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description,
jPlayer:{
swfPath:'plugin/jquery-jplayer'
}
});
});
</script>
</div>
<div id="footer">
Copyright 2016
</div>
</div>
</body>
</html>
I think this is what you're looking for. Place the script tag somewhere other than the content (end of the file is usually good... or in a separate file... your choice) and attach the music player to the #content div:
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<!-- header code -->
</div>
<div id="nav">
<ul>
<!-- Navigation code -->
</ul>
</div>
<div id="content">
<!-- content goes here -->
</div>
<div id="footer">
Copyright 2016
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var description = 'Example text'
$('#content').ttwMusicPlayer(myPlaylist, {
autoPlay: false,
description: description,
jPlayer: {
swfPath: 'plugin/jquery-jplayer'
}
});
});
</script>
</body>
Related
I am trying to change pages on in my project. I have two divs containing information and they each have a data-role of "page". In addition, they both have ids. On my js file I have a simple onclick event that calls a function that then uses the
$.mobile.changePage("#2");
To go from my first div to my second div. The only problem is whenever I try to change the page I am getting an error:
Uncaught TypeError: Cannot read property 'changePage' of undefined
I have already searched on other peoples posts on stack overflow and haven't found anything that can help me. Here is some of my code:
global.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<script src="js/lib/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/lib/jquery.mobile-
1.4.5.css">
<script src="js/global.js"></script>
<script src="js/lib/jquery.mobile-1.4.5.js"></script>
<script src="js/p5.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js">
</script>
</head>
<body>
<div data-role="page" id="1" style="background-color: #56f0b1;">
<button id ="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
</body>
</html>
global.js
$(document).ready(function () {
$("#startGame").on("click",getToNextPage);
});
function getToNextPage(){
$.mobile.changePage("#2");
}
As mentioned in comments, the core jQuery library must be loaded before jQuery Mobile.
In your code, it seems you're loading two jQuery versions and one of them is loaded after jQuery Mobile.
Also, according to comments in this question, the page IDs should not be only numeric.
Here's an example:
$(document).ready(function() {
$("#startGame").on("click", getToNextPage);
});
function getToNextPage() {
$.mobile.changePage("#page2");
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1" style="background-color: #56f0b1;">
<button id="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="page2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
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 using the Emojione Area JavaScript plugin. However, I am only getting the text area displayed, without the emoji pane.
Here is my HTML file :
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
</script>
<div class="row">
<div class="span6">
<textarea id="emojionearea1">Default :smile:</textarea>
</div>
</div>
</body>
</html>
There is two things to fix on your code:
You need to import the Javascript File from jQuery before EmojioneArea
Your Script in Javascript doesn't close the function $(document).ready()
So the should should be:
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="row">
<div class="span6">
<textarea id="emojionearea1">Default :smile:</textarea>
</div>
</div>
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet"
});
})
</script>
</body>
</html>
The Popup will appear on the Right side because Left is not a valid value for the propertie pickerPosition. According to the documentation (www.github.com/mervick/emojionearea) the only valid values are top, right and bottom. The value top is the default one
I Hope it helps you
Best regards
I had a similar issue with the emojioneArea panel not being visible no mater what the position was set to. I added the property inline: true and it showed up.
<script>
$(document).ready(function() {
$("#emojionearea1").emojioneArea({
pickerPosition: "left",
tonesStyle: "bullet",
inline: true
});
})
PHP Version 7.0
JQuery Version 3.1.0
You can see that the everything above the code is simply copied and pasted every five seconds rather than refreshing.
The intention is to refresh the include every five seconds.
Website: http://ssmsportal.cf/pages/incomingCalls.php
Code:
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>ServerSide Moderation Services</title>
<link rel="stylesheet" href="../styles/tablesStyles.css" type="text/css" />
<link rel="stylesheet" href="../styles/incomingCallsStyle.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script src="../scripts/general.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whats Up?</title>
</head>
<body class="body">
<?php include '../includes/header.php'; ?>
<div class="mainContent">
<div class="logRegArea">
<article class="callsContent" style='padding-left: 0px; padding-right: 0px;'>
<header>
<h2 class="loginArea" style="text-align:center">Incoming Calls:</h2>
</header>
<content>
<div id="login">
<?php include '../includes/incomingCalls.php'; ?>
</div>
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function () {
$('#login').load('../includes/incomingCalls.php')
}, 5000);
});
</script>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p>This website was developed by ROBLOX user: wattleman</p>
</footer>
</body>
</html>
That's the normal behavior of the load function.
You should instead try:
$.get("../includes/incomingCalls.php", function(data) {
$("#login").html(data);
});
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>