Im trying to put an Angularjs image slider into a laravel project, this is the code for the view
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
$scope.activeSlide = 0;
$scope.slides = [
{
image: 'images/hotel1.jpg'
},
{
image: 'images/piscina1.jpg'
},
{
image: 'images/pool1.jpg'
},
{
image: 'images/presidencial1.jpg'
}
];
}
</script>
<title>Papayon Resorts</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#if (Auth::check())
Inicio
#else
Iniciar Sesión
Registro
#endif
</div>
#endif
<div class="content">
<div class="title m-b-md">
Papayon Resorts
</div>
<div class="links">
Habitaciones
Paquetes de promoción
</div>
</div>
<div>
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<uib-carousel interval="myInterval" active="activeSlide">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto; height: 500px; width: 700px" ><!-- this is the line where I have the error-->
<div class="carousel-caption">
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
but when I do this it tells me this error
Below is is the error I get:
Any idea of how to solve this?
use the # symbol to inform the Blade rendering engine an expression should remain untouched
Change this
<img ng-src="{{slide.image}}" style="margin:auto; height: 500px; width: 700px" ><!-- this is the line where I have the error-->
to
<img ng-src="#{{slide.image}}" style="margin:auto; height: 500px; width: 700px" ><!-- this is the line where I have the error-->
Docs: https://laravel.com/docs/5.4/blade#blade-and-javascript-frameworks
Related
I'm doing a project. At a certain point i want to have two buttons, one for changing to a lighter theme and another to change to a darker theme and apply the changes to the whole website and not just the page in question
This is the page where i have the functionality:
ConfLayout.cshtml:
<!DOCTYPE HTML>
<html>
<head>
<title>TekSell</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="~/Content/styles.css" rel="stylesheet" />
<link href="~/Content/styles-admin.css" rel="stylesheet" />
</head>
<body id="top">
<section id="banner">
<div class="inner">
Learn More
</div>
</section>
<!-- Main1 -->
<div id="main">
<p style="text-align:center">Serviços</p>
<div class="inner">
<!-- Services -->
<div class="thumbnails">
<div class="box">
<img src="~/Content/Images/gallery.jpg" />
<div class="inner">
<h7>Galeria</h7>
</div>
</div>
<div class="box">
<img src="~/Content/Images/location.jpg" />
<div class="inner">
<h7>Localização</h7>
</div>
</div>
</div>
</div>
</div>
<!-- Main2 -->
<div class="page">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3 class="section-title">Sobre Nós</h3>
<figure><img src="~/Content/Images/logo.jpg" /></figure>
<h4>Acerca de nós</h4>
<p>Somos uma empresa fictícia de venda de software informático</p>
</div>
<div class="col-md-4">
<h3 class="section-title">Âmbito</h3>
<h4>Projeto desenvolvido no âmbito da unidade curricular de Laboratório de Desenvolvimento de Software</h4>
</div>
<div class="col-md-4">
<h3 class="section-title">Configurar página</h3>
<h4>Administrador, altere aqui o layout da página</h4>
<div class="dropdown">
<button class="dropbtn">Layout Configuration</button>
<div class="dropdown-content">
Change to lighter theme
Change to darker theme
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h7>TekSell</h7>
<p>Email: teksell#lds.pt</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="~/Scripts/changeLayout.js"></script>
</body>
</html>
As you can see i've two css files created. The 'styles.css' is the lighter theme, and 'styles-admin.css' is the darker theme. The functionality is implemented at "div class="dropdown-content"
What happens is, as i have both css files linked, when i run it, by default, the view assumes the darker theme(styles-admin.css).
This is the javascript file i use to try the changes:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
What is missing? Am i doing it the wrong way?
If you include two CSS files with the same selectors inside, the second file will always override the first.
Just use one <link> and change its href.
Also, why load jQuery and not use it?
<link href="~/Content/styles.css" rel="stylesheet" />
$("link").attr("href","~/Content/styles-admin.css");
Job done!
Use similar way. Preset the theme colours and change the root attribute like this
const colors =['#317EEB', '#6427BA'];
let index = 0;
function changeBackground(){
index = (index+1)%2;
document.documentElement.style.setProperty('--main-color', colors[index]);
}
:root {
--main-color: #317EEB;
}
.set-background{
background: var(--main-color);
width: 10em;
height: 10em;
}
button{
margin-top: 5px;
}
<div class="set-background">
</div>
<button onClick="changeBackground()">Change color</button>
In my page i have this path for display an image.
Example:
<link rel="icon" type="image/png" href="/img/logo.png"/>
My image is not display, because on my Apache the path is:
/var/www/html/apps/stc-1.0-r-20170516195017/img/logo.png
The particularity off my path is my app is rebuild every day so this argument stc-1.0-r-20170516195017 is dynamic
My question is how can i do in javascript to get my path /apps/static-[DYNAMIC_VALUE]/ ?
Hint: My root directory is : /var/www/html/
My page:
<!DOCTYPE html>
<html dir="ltr" lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" type="image/png" href="/img/logo.png" />
<title>Erreur 404</title>
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
<link rel="stylesheet" type="text/css" href="/css/theme.css" />
</head>
<body>
<div id="app">
<div id="site">
<div class="header" id="header-container">
<header>
<div id="header">
<div class="inside">
<div class="fl"><a class="header-link" title="Retour à l'accueil de Google" href="http://www.google.com/">Google</a>
</div>
</div>
</div>
<div id="banner">
<div role="banner" class="inside">
<div class="fl menu-main-conteneur ">
<nav id="menu-main" aria-label="Menu principal" data-title="Menu" class="menuHaut"></nav>
</div>
<div class="fl w10 mls">
<a class="sub-header-link" href="/accueil" title="Retour vers la page d'accueil " id="img-logo"><img src="img/logo.png" alt="Application" /></a>
</div>
<div class="fl mls">
<a class="sub-header-link" href="/apps/accueil" title=" Retour vers la page d'accueil ">
<h1 id="app-title">Application </h1>
</a>
</div>
</div>
</div>
</header>
</div>
<main id="page" role="main">
<span></span>
<div id="nfe-page">
<div id="nf-img"></div>
<h2 class="nfe-title">Oops! Nous ne trouvons pas ce que vous cherchez!</h2>Retour à la page d'accueil
</div>
</main>
<footer id="ft" class="footer-container" role="contentinfo">
<div id="footer" class="footer-content inside">
<div class="fl mll">
<ul class="footer-links">
<li>Plan de l'application
</li>
<li>Accessibilité
</li>
<li>Contact
</li>
</ul>
</div>
<div class="fr mrl">
<p>Application </p>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
The better way
Is to apply some change under your configs files.
but since i don't have not enough explaination about them...
Alternative
In your case, you can bypass the dynamic behavior
by getting recursively the excepted file using the dynamic pattern:
$iter = new RecursiveIteratorIterator
(
new RecursiveDirectoryIterator($you_root_dir, RecursiveDirectoryIterator::SKIP_DOTS),
RecursiveIteratorIterator::SELF_FIRST,
RecursiveIteratorIterator::CATCH_GET_CHILD // Ignore "Permission denied"
);
foreach ($iter as $path => $fileinfo)
{
if($fileinfo->isDir() && preg_match("/^stc-.*[\d]+$/i", $fileinfo->getFilename()))
{
$logo = $path."/img/logo.png";
if(file_exists($path."/img/logo.png"))
{
header("Content-Type:image/png");
header("Content-Length: ".filesize($logo));
readfile($logo);
break;
}
}
}
However, if at creation, the static dir is preserved,
you should take the newest directory, by ignore the old stagged dirs.
// sort and get the newest dir
$dirs = [];
array_walk(scandir($path, SCANDIR_SORT_DESCENDING),
function($d, $k) use(&$path, &$dirs)
{
if(is_dir($path.$d) && !preg_match("/^\.+$/", $d))
$dirs[filemtime($path.$d)] = $d;
});
ksort($dirs);
// check and show the img
$logo = array_pop($dirs)."/img/logo.png";
if(file_exists($logo))
{
header("Content-Type:image/png");
header("Content-Length: ".filesize($logo));
readfile($logo);
}
You have to put the wanted code inside a new file called logo.php
and callable from your web root like :
<img src="logo.php">
I am using Cordova 6.2.0 and want to override the backbutton on Android. I found the following solution(s) but this doesn't work for me (I guess it's because of the cordova Version): link.
I am using the following code to override the backbutton:
document.addEventListener("deviceready",ondeviceready, false);
function ondeviceready()
{
document.addEventListener("backbutton", onBackKey, false);
}
function onBackKey()
{
//Do something
}
The Problem is that the backbutton only "does something" on the first page. this is my index.html page:
<html>
<head>
<meta charset="utf-8"/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Stadtwerke-App</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="js/hammer.js"></script>
<script>
$(document).ready(function(e) {
var startX, curX, startY, curY; // Variables
var newXScroll, newYScroll, genXScroll; // More Variables!
// Change the height of the sidebar, as well as a few things to do with the main content area, so the user
// can actually scroll in the content area.
function sideBarHeight() {
var docHeight = $(document).height();
var winHeight = $(window).height();
$('.slide-in').height(winHeight);
$('#main-container').height(winHeight);
$('#sub-container').height($('#sub-container').height());
}
sideBarHeight();
var outIn = 'in';
Hammer(document.getElementById('main-container')).on('swiperight', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
});
Hammer(document.getElementById('main-container')).on('swipeleft', function(e) {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
});
function runAnimation() {
if(outIn == 'out') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'in';
} else if(outIn == 'in') {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
outIn = 'out';
}
}
$('.menu-icon').click(function() {
$('.slide-in').toggleClass('on');
$('#main-container').toggleClass('on');
});
});
</script>
</head>
<body id="index" name="index">
<!--script>start()</script-->
<div id="main-container" class="tk-chaparral-pro">
<div id="Email" class="emailbox"></div>
<h2>News</h2>
<div class="Container" onclick='browser("http://www.tagesschau.de/inland/eeg-reform-105.html")'>
<p class="Buttonbereich" align="center"><img src="img/Tagesschau.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Wie geht es weiter mit der Energiewende?</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/metropolregion_artikel,-Nach-Unwetter-Behinderungen-im-Bahnverkehr-_arid,195765.html")'>
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 31.05.2016: Nach Unwetter: Behinderungen im Bahnverkehr</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/finanzen/meine-finanzen/geld-ausgeben/so-bekommen-sie-die-praemie-fuer-ihr-e-auto-14239079.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 18.05.2016</p-->
<p class="Buttonbereich2"> 18.05.2016: So bekommen Sie die Prämie für Ihr E-Auto</p>
</div>
<div class="Container" onclick='browser("http://www.rnz.de/nachrichten/region_artikel,-Hochspannungstrasse-bei-Leimen-Nach-80-Jahren-gehen-die-Stahlmasten-in-Rente-_arid,192723.html")' >
<p class="Buttonbereich" align="center"><img src="img/rnz_schriftzug.png"></p>
<p class="Buttonbereich2"> 18.05.2016: Nach 80 Jahren gehen Stahlmasten in Rente</p>
</div>
<div class="Container" onclick='browser("http://www.faz.net/aktuell/wirtschaft/grafik-des-tages-woher-kommt-unser-strom-14237266.html")'>
<p class="Buttonbereich" align="center"><img src="img/link_faz.png"/></p>
<!--p class="Buttonbereich4"> 17.05.2016</p-->
<p class="Buttonbereich2"> 17.05.2016: Woher kommt unser Strom?</p>
</div>
<div id="sub-container">
</div>
<br><br><br><br><br><br><br><br><br><br>
<div class="nav">
<div class="navbox">
<div class="menu-icon">
<div class="bar"> </div>
<div class="bar"> </div>
<div class="bar"> </div>
</div>
</div>
<div class="navbox" style=" float:right"><img src="img/Musterwerke.PNG" style="float:right;height:100%;background-color:white"> </div>
<h1 align="center" style="margin-top:10px;">Stadtwerke-App</h1>
</div>
<div class="footer">
<a rel="external" href="infos.html" ><img src="img/Infos.png" alt="hsag logo" style="float:left;height:80%;border:5px solid white"/></a>
<div class="navbox" style=" float:right" onclick='browser("https://www.hsag.info")' ><img src="img/hsag_logo.png" style="float:right;height:100%;background-color:white"> </div>
</div>
</div>
<div class="slide-in">
<ul class="tk-museo-sans">
<li onclick='window.open("index.html","_self" )' >Startseite</li>
<li onclick='window.open("Index_Nach Registrierung.html","_self" )'>Zählerstandserfassung</li>
<li onclick='window.open("Abfallkalender.html","_self" )'>Abfallkalender</li>
<li onclick='window.open("Apothekennotdienst.html","_self" )'>Apothekennotdienst</li>
<li onclick='window.open("Stoerungsmeldung.html","_self" )'>Störungsmeldung</li>
<li onclick='window.open("Services.html","_self" )'>Kundenportal</li>
<li onclick='window.open("Spartipps.html","_self" )'>Energiespartipps</li>
<li onclick='window.open("Vergleich.html","_self" )'>Verbrauchsvergleich</li>
<li onclick='window.open("Events.html","_self" )'>Event-Übersicht</li>
<li onclick='window.open("Impressum.html","_self" )'>Impressum</li>
<li onclick='window.open("Einstellungen.html","_self" )'>Einstellungen/Account</li>
</ul>
</div>
</body>
</html>
All other Pages include the same JS-Scripts.
Try the following code .It woks for me
In HTML:
<body onload="onLoad()">
in Script:
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
}
I found a solution for my problem. I was using the window.open("page.html","_self") function to navigate through my pages. This was the problem because i created a new browser-instance in my Application. Instead its smarter to use the following function:
window.location="page.html"
Now the onBackKey() function is firing at every single page.
I want to add a spinner to show that the content is loading, when someone clicks on an icon. Basically when someone clicks the hyper-link, the page takes time to load and meanwhile I want to show a spinner/'loading image'. How to implement that?
Thanks in advance
My HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="keywords" content=" my webpage" />
</head>
<body>
<div class="content">
<div class="wrap">
<!--- start-top-grids---->
<div class="top-grids">
<div class="top-grid">
<div class="product-pic">
<img src="img/search_page.png" title="watch" />
</div>
Directory
</div>
<div class="top-grid">
<div class="product-pic">
<img src="img/news.png" title="shoe" />
</div>
News
</div>
<div class="top-grid">
<div class="product-pic">
<img src="img/payment.png" title="view pay" />
</div>
View Pay
</div>
<div class="clear"> </div>
<div class="clear"> </div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</body>
</html>
You can try something like below:
1) Place "spinning wheel" image in one div.
2) Add "Loading..." text
When your page is loading set that div to display and once your page is loaded successfully set div to display: none.
<div id="progressIndicator" style="display: none;">
<div style="background-color: Transparent;" >
<img src="Images/indicator_mozilla_blu.gif" style="font-family: Tahoma; font-size: small; cursor: wait"
align="absMiddle" alt="" /> Loading...
</div>
</div>
UPDATE
When you are clicking on Image button do not directly call server side function. Instead call a client side function like "CallServerSideFunction()" and from that function call your server side function. You can try something like below:
In Javascript function:
function DisplayProgress() {
document.getElementById('progressIndicator').style.display = '';
}
function HideProgress() {
document.getElementById('progressIndicator').style.display = none;
}
function CallServerSideFunction() {
DisplayProgress();
document.getElementById("btnCallServerSideFunction").click();
HideProgress();
}
Let me know if this helps.
I've just started with a simple jQuery Mobile app in Intel XDK. There are only two pages (views) and a button to show the second page from the main one.
Below is the code untouched (as produced by the visual designer).
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js"></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
</head>
<body>
<!-- content goes here-->
<div class="uwrap">
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<div class="upage-content" id="mainsub">
<div class="grid grid-pad urow uib_row_1 row-height-1" data-uib="layout/row" data-ver="0">
<div class="col uib_col_1 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_1 d-margins" data-uib="media/text" data-ver="0" id="page1-line1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Text in page-1</p>
</div>
</div><a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gotoP2">goto Page2</a><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
<!-- /upage-content -->
</div>
<!-- /upage-outer -->
</div>
<div class="upage" id="secondPage" data-role="page">
<div class="upage-outer">
<div id="secondPagesub" class="upage-content ">
<div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
<div class="col uib_col_2 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="widget uib_w_2 d-margins" data-uib="media/text" data-ver="0" id="page2-line1">
<div class="widget-container left-receptacle"></div>
<div class="widget-container right-receptacle"></div>
<div>
<p>Text in page 2</p>
</div>
</div><span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>
</div>
</div>
<!-- /upage-outer -->
</div>
<!-- /upage -->
</div>
<!-- /uwrap -->
</body>
And the index_user_scfripts.js file:
(function() {
"use strict";
function register_event_handlers() {
$("#gotoP2").click(function(evt) {
$("body").pagecontainer("change", "secondPage", { reverse: false});
});
}
$(document).ready(register_event_handlers);
})();
When I hit the button in the first page, the debugger throw a JavaScript error in jquery.min.js file:
Uncaught Error: cannot call methods of pagecontainer prior to initialization; attempted to call method "change"
Any sugestion are wellcome.
The problem was in the method to call the page change. Instead the original, the index_user_scripts.js must be:
(function() {
"use strict";
function register_event_handlers() {
$("#gotoP2").click(function(evt) {
$(":mobile-pagecontainer").pagecontainer("change", "#secondPage", { reverse: false});
});
}
$(document).ready(register_event_handlers);
})();