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>
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 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>
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 would like to start saying that I'm not that experienced with the technologies that I'm using, I'm doing this project to practice using them.
I just downloaded JetBrains Webstorm and created a Foundation Project.
I created a <textarea> and I want to bind it to a value I defined in my AngularJS controller. The controller code is very simple (it's in my main.js file):
var readerApp = angular.module("readerApp", []);
function ReaderCtrl = function($scope){
$scope.data = {
text = "Default text"
}
}
So I only have a simple text that I want to bind like this: ng-model="{{data.text}}"
Although when I do that, the <textarea> still doesn't show anything. I'll post the entire HTML page, maybe there's a small detail I'm missing, but it seems right to me
<!doctype html>
<html class="no-js" lang="en" ng-app="readerApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speed Reader | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="large-12 columns large-text-center">
<h1>Welcome to Speed Reader!</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel" ng-controller="ReaderCtrl">
<h3>Insert your text here! </h3>
<textarea id="textarea" rows="25" ng-model="{{data.text}}"></textarea>
Start reading
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/main.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My God Man Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/Content/IE9FixScripts"></script>
;
<![endif]-->
</head>
<body>
<div id="wrap">
<div class="container">
<!-- Main content any sections which need to be filld in and then body -->
<div class="container">
<div class="jumbotron">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h3>Home Page.</h3>
<h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4>
</hgroup>
</div>
</section>
<!-- footer section here needs customisation.-->
<div id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right">Back to top</li>
<li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li>
<li>Tool Tip Right</li>
<li>Tool Tip Bottom</li>
<li>Tool Tip Top</li>
<li>PopOver</li>
<li>PopOver2</li>
</ul>
</div>
</div>
</footer>
</div>
<!-- footer ends-->
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$.ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
</script>
</body>
</html>
Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]
did what it says but ain't working.
what is the mistake what i am making.
am i forgetting to add a reference to something?
or my JQuery verion is not good should i go back?
Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. and it works there.
but not for me. Strange. it may be some thing really small. but cant seem to get it.
Any help is appreciated.
I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/
For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. That said, you were missing 'document' in your $.ready declaration. Without it the tooltips never appeared.
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well.