I am using phpstorm to create project using php, bootstrap and jquery. In this Project,I got two errors. But i don't know how to solve this error.
Can anyone tell me what is the fault? I have attached two images.
Code
<html>
<head>
<title>boutique</title>
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-----NavBar----->
<nav class="navbar navbar-default navbar-fixedtop">
<div class="container-fluid">
boutique
<ul class="nav navbar-nav">
<li class="dropdown">Men<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Pants</li>
<li>Shoes</li>
<li>Accessories</li>
<li>Watch</li>
</ul>
</li>
</ul>
</div>
</nav>
<!---Header------>
<div id="headerwrapper">
<div id="back-flower"></div>
<div id="logotext"></div>
<div id="for-flower"></div>
</div>
<script>
jquery(window).scroll(function () {
var vscroll=jquery(this).scrollTop();
jquery('#logotext').css({
"transform" :"translate(0px,"+vscroll/2+"px)"
});
var vscroll=jquery(this).scrollTop();
jquery('#back-flower').css({
"transform" :"translate("+vscroll/5+"px,-"+vscroll/12+"px)"
});
var vscroll=jquery(this).scrollTop();
jquery('#fore-flower').css({
"transform" :"translate(0px,"+vscroll/2+"px)"
});
});
</script>
</body>
</html>
Why do you using same name for var?
You can extract the scroll position using jQuery's .scrollTop() method
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Do something
});
Or try this;
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > some_number) {
// do something
}
});
Related
I'm trying to use the Popup widget of Jquery Mobile 1.4.5 but I've got some problem when I try to load a external page in a Popup from a sub page. Here's my code:
Index.htm:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<ul data-role="listview">
<li>IMDB</li>
<li>Test A</li>
<li>Test B</li>
</ul>
</div><!-- /page -->
</body>
</html>
list.php:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<ul data-role="listview">
<li>Bangkok Dangerous
<li>Drive Angry
<li>Knowing
</ul>
</div>
</body>
<script language="javascript">
function loadPopup(url) {
$.ajax({
type: "GET",
url: url
}).done(function(data) {
$.mobile.activePage.append($(data)).trigger("create");
$("#popup1").popup().popup("open");
});
}
</script>
</html>
imdb.php:
<html>
<body>
<div data-role="popup" id="popup1" style="min-height:300px;width:80%;left:10%;right:10%;" class="ui-content">
Fermer
<?php
$imdbnumber = $_GET["imdbnumber"];
$movie_poster = "http://img.omdbapi.com/?apikey=xxxxxxxx&i=" . $imdbnumber . "&h=300";
$movie_details = json_decode(file_get_contents("http://www.omdbapi.com/?i=" . $imdbnumber . "&plot=full"));
echo "<div style='float:left;padding-right:20px;'><img src='" . $movie_poster . "' height=300></img></div>";
echo "<div><h3><b>" . $movie_details->Title . " (" . $movie_details->Year . ")</b></h3>" . $movie_details->Plot . "</div>";
?>
</div>
<script>
$("[data-role=popup]").enhanceWithin().popup({
afterclose: function () {
$(this).remove();
}
}).popup("open");
</script>
</body>
</html>
When I load index.htm then click on IMDB link then try to load IMDB info for one of the listed movie, it doesn't work. If I load directly list.php then my Popup is working perfectly.
Something I'm doing wrong?
Thank you!
P.S.: I've tried with Colorbox but I get the same kind of result... :-/
I was trying to create a custom directive, and inside the template of my directive, I have included a directive of angular-bootrstrap library. In this case a popover directive.
When I run my app, the following error appears:
Error: [$compile:multidir] Multiple directives [bar, bar] asking for template on: navbar-default progress-bar" ng-class="type && 'progress-bar-' + type" role="navigation>progressbar" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="{{max}}" ng-style="{width: >percent + '%'}" aria-valuetext="{{percent | number:0}}%" ng-transclude="" bar="">`
What's wrong in my code?
app.js
(function () {
'use strict';
//var angular = require('angular');
function config($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/init.html',
controller: 'MainCtrl',
controllerAs: 'main',
resolve: {
jobsData: function(ServiceMain) {
return ServiceMain.getData();
},
itemsData: function(ServiceMain,$resource) {
return ServiceMain.getItems();
},
}
});
}
angular.module('testApp', ['ngRoute','app.controller','ui.bootstrap'])
.config(config);
})();
home.php
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- inject:css -->
<link rel="stylesheet" href="css/style.css">
<!-- endinject -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<link rel="stylesheet" href="bower_components/ng-sortable/dist/ng-sortable.min.css">
<link rel="stylesheet" href="bower_components/angular-hotkeys/build/hotkeys.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<!-- endinject -->
</head>
<body>
HERE I USED MY CUSTOM DIRECTIVE
<nav bar class="navbar navbar-default" role="navigation"></nav>
<!-- Here we'll to load the templates of the App -->
<div ng-view></div>
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="components/app.js"></script>
<script src="components/controllerMain.js"></script>
<script src="components/directiveUserBar.js"></script>
<script src="components/serviceMain.js"></script>
<!-- endinject -->
<script type="text/javascript">
var base_url = '<?php echo base_url(); ?>';
</script>
</body>
</html>
directiveUserBar.js
(function () {
'use strict';
function userBarDirective() {
return{
restrict: 'EA',
templateUrl:'views/user-bar.html',
link: function (scope, element, attrs) {
// DOM manipulation/events here!
scope.showMe = function(){
alert('showSomething!');
}
scope.logOut = function(){
alert('log out me!');
}
},
controller: function($scope){
$scope.modules = ['a','b','c','d'];
$scope.user = "Gonzalo"
}
};
}
angular
.module('testApp')
.directive('bar',userBarDirective);
})();
The template of my directive: user-bar.html
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#userMenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Info Plant</a>
</div>
<div class="collapse navbar-collapse" id="userMenu">
<ul class="nav navbar-nav" ng-repeat="module in modules">
<li><a ng-click="showMe()">{{module}}</a></li>
</ul>
<div class="form-group">
<a popover-placement="bottom" popover="user" popover-title="Gonzalo"> Log Out</a>
</div>
</div>
</div>
My first thought is that you are using two directives on the same element and both specify a template or templateurl property.
That said, looking at your code, we're not getting the full picture because your error is telling you about progressbar but that directive isn't used in any of the code you've pasted.
In the future, a working plunker that shows the error is much more helpful in determining where errors lie.
I'm creating a website. and I'm starting with the header first.
I have this code for my header page:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<a href="index.php">
<img border="0" class="logo" src="images/logo.png" width="15%" height="20%" align="left" /></a> <font size="15%"><div align="center" class="BDtext"> Title Here<br> Description Here</font></div><br>
<nav class="clearfix">
<ul class="clearfix">
<li class="home">Home</li>
<li class="about">About</li>
<li class="me">About Me</li>
<li class="sessions">Sessions</li>
</ul>
Menu
</nav>
</body>
</html>
Which I am aware that the align="left" is used to allow everything else to be positioned to the right of image.
however.
I only want the title and description to be to the right of the image.
in some web browsers, the menu bar goes over the image.
an example of this is when I use this code in my style.css:
#media only screen and (max-width : 320px) {
.BDtext {
display: none;
}
I want this to be aligned underneath the image.
Please can someone explain how I can keep the image aligned left but stop the menu bar from overlapping the image instead of using the br code?
please help.
thank you.
I'm working on my own personal site here. If you hover over any of the nav bar elements you will notice there is some flicker and not all of the elements are visible. You can verify this via F12. It seems to me that the <aside> tag is "hiding" the info I'm looking for.
Would someone please tell me how to bring the nav bar to the front of something. I'm not really sure what's going on here.
index.php:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Grown Kidd Creations</title>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<header>
<img alt="Picture of me and Cian" src="img/caindaddysleepin.jpeg" title="Cian and Daddy">
<?include_once 'nav/nav.php';?>
</header>
<aside class="left"><p>No idea what to put here. how about you fill out the form and tell me?</p></aside>
<aside class="right">
Recent News/Updates:<br/>
<span class="undercon">This will be updated soon with links and maybe a blog.</span>
<ul>
<li>Cian</li>
<li>Work</li>
<li>Family</li>
</ul>
</aside>
<footer>
Send me some love at BillyThaKidd04#gmail.com<br/>
Or find me at:<br/>
<div class="g-plus" data-href="https://plus.google.com/109325835178774768962?prsrc=3" data-theme="dark" rel="author"></div>
Follow #ThaKidd04
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</footer>
</body>
</html>
nav.php
<?//navigation bar?>
<script>
var el = document.getElementsByTagName("body")[0];
el.className = "";
</script>
<noscript>
<!--[if IE]>
<link rel="stylesheet" href="nav/css/ie.css">
<![endif]-->
</noscript>
<link rel="stylesheet" href="nav/css/nav.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<nav id="topNav" class="no-js">
<ul>
<li>Home</li>
<li>Projects
<ul>
<li>Personal Projects</li>
<li>Work Projects</li>
<li class="last">This Site</li>
</ul>
</li>
<li>Contact Me
<ul>
<li>FaceBook</li>
<li>Google +</li>
<li>LinkedIn</li>
<li class="last">Email Me</li>
</ul>
</li>
<li>About Me
<ul>
<li>Blog</li>
<li>Resume</li>
<li class="last"><a target="new" href="https://github.com/billythakidd04" title="GitHub">GitHub</a></li>
</ul>
</li>
</ul>
</nav>
<script src="nav/js/modernizr.custom.69568.js"></script>
<script>
(function($)
{
//cache nav
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function()
{
if ($(this).find("ul").length > 0)
{
$("<span>").text("").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function()
{
$(this).find("ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function()
{
$(this).find("ul").stop(true, true).slideUp();
});
}
});
})(jQuery);
</script>
You should post your css since it seems that the whole issue is connected—or at least can be solved—by a z-index adjustment:
The z-index CSS property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
Ok , so I am trying to load content from a another page using JQUERY LOAD method SO THE content can appear without the page refreshing. I did that but when I click on the link below generated from PHP , it still redirects me to the other page instead of the content loading into the <div class="panel">
Below is my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> MadScore, A Social Scoring Platform </title>
<link rel="stylesheet" type="text/css" href="css/madscore.css">
<link rel="stylesheet" type="text/css" href="css/skins/tango/skin.css" />
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1, buttonNextHTML:"<div></div>", buttonPrevHTML:"<div></div>"
});
});
</script>
//Here is where I made the Jquery call for the div below with class "panel" but it won't load ..
<scrip type="text/javascript">
$(document).ready(function(){
$("profile").click(function(){
$(".panel").load("this.href");
});
});
</script>
</head>
<body>
<div class="sliding-panel">
<div class="container">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>
<li>
<div class="panel"> //panel supposed to be triggered by Jquery
<h1> People </h1>
<?php
database_connect();
$query = "select * from People";
$result = $connection->query($query);
$row_count =$result->num_rows;
for($i = 1; $i <= $row_count; $i++)
{
$row = $result->fetch_assoc();
echo "<a href='/profile.php?id=".$row['ID']."' id='profile'><img src ='../".$row['Picture']."' width='100' height='100' /> </a>";
}
?>
</div>
</li>
<li>
<div class="panel">
<h1>Ballers</h1>
</div>
</li>
<li>
<div class="panel">
<h1>Movies</h1>
</div>
</li>
<li>
<div class="panel">
<h1> Talking heads</h1>
</div>
</li>
</ul>
There are few errors,
1 Wrong spelling of script. scrip should be script
2 wrong syntax of id selector. $("profile") should be $("#profile")
3 loading constant string instread of current element href. load("this.href") should be
load(this.href)
Change
<scrip type="text/javascript">
$(document).ready(function(){
$("profile").click(function(){
$(".panel").load("this.href");
});
});
</script>
To
<script type="text/javascript">
$(document).ready(function(){
$("#profile").click(function(){
$(".panel").load(this.href);
});
});
</script>