google adsense ads not showing up on home-track.html - php

I have index.php main page:
<!doctype html>
<html>
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-123456789123456",
enable_page_level_ads: true
});
</script>
<?php require_once "system/configs.php"; ?>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?= $baseurl?>css/bootstrap.css">
<link rel="stylesheet" href="<?= $baseurl?>css/font-awesome.css">
<meta name="google-signin-client_id" content="80957862538-juiu2cgia32rn3lik36fv9a1ihc6fqof.apps.googleusercontent.com">
<link rel="stylesheet" href="<?= $baseurl?>css/animate.css">
<link rel="stylesheet" href="<?= $baseurl?>css/style.css">
<link rel="stylesheet" href="<?= $baseurl?>css/player.css">
<title>Radio Shqip</title>
<base href="/">
</head>
<body ng-app="musiclistener">
<span ng-cloak>
<span ng-view ></span>
</span>
<div id='player-container'>
<audio controls id='music-player' src="#"></audio>
<div class='container-fluid'>
<div class='col-sm-1 col-xs-3 text-center' id='play-icon-container'>
<i class='fa fa-play-circle' id='play-btn' ng-click="playtoogle()"></i>
</div>
<div class='col-sm-1 center-block hidden-xs' id='podcast-icon-container'>
<img src="{{ playerthumb }}" id='play-img' class='img-responsive center-block' style="margin-top:7.5px">
</div>
<div class='col-md-6 col-sm-4 col-xs-6' id='podcast-bar-container' style="margin-top:17px">
<span style='color:#fff;position:relative;top:3px;text-transform:capitalize' ng-if="musicplayingentity">{{ musicplayingentity}}</span>
<div id='podcast-progress'>
<div id='podcast-id-value'></div>
</div>
</div>
<div class='col-md-1 col-sm-2 text-center hidden-xs' id='addons-icon-container'>
<span ng-hide="userLoggedIn">
<a href data-toggle="modal" data-target="#loginModal"><i class='fa fa-heart-o pull-left'></i></a>
<a href data-toggle="modal" data-target="#loginModal"><i class='fa fa-comment-o '></i></a>
</span>
<span ng-show ="userLoggedIn">
<i ng-click="makeFavoritePlayer()" ng-hide="playingfav" class='fa fa-heart-o extrafun'></i>
<i ng-click="removeFavoritePlayer()" ng-show="playingfav" class='fa fa-check extrafun'></i>
<i ng-click="showCommentBoxPlayer()" class='fa fa-comment-o'></i>
</span>
<i class='fa fa-share-alt pull-right' ng-click="shareboxPlayer(shareslug)"></i>
</div>
<div class='col-sm-3 col-xs-3 text-center' id='volume-container'>
<div class='col-xs-2'>
<i class='fa fa-volume-up'></i>
</div>
<div class='col-xs-1 col-md-9' style="margin-top:20px">
<div id='volume-progress'>
<div id='volume-id-value'></div>
</div>
</div>
</div>
</div>
</div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="<?= $baseurl?>ang/angular.min.js"></script>
<script src="<?= $baseurl?>ang/angular-sanitize.min.js"></script>
<script src="<?= $baseurl?>ang/angular-route.min.js"></script>
<script src="<?= $baseurl?>ang/angular-cookies.min.js"></script>
<script src="<?= $baseurl?>ang/angular-facebook-sdk.js"></script>
<script>
window.fbAsyncInit = function()
{
FB.init({ appId : '195962897544265', xfbml : true, version : 'v2.8' });
};
</script>
<script src="<?= $baseurl?>ang/app.js"></script>
<script src="<?= $baseurl?>ang/controllers.js"></script>
<script src='<?= $baseurl?>js/jquery-1.7.2.min.js'></script>
<script src='<?= $baseurl?>js/bootstrap.js'></script>
<script src='<?= $baseurl?>js/typed.js'></script>
<script src='<?= $baseurl?>js/wow.js'></script>
<script src='<?= $baseurl?>js/player.js'></script>
<script type="text/javascript" src="<?= $baseurl?>js/script.js"></script>
<script type="text/javascript" src="<?= $baseurl?>ang/core.js"></script>
<script>
new WOW().init();
</script>
<script>
$(function(){
$(".typing-text").typed({
strings: ["MUSIC", "SPORTS", "BOOKS", "NEWS", "TALK"],
typeSpeed: 200,
backSpeed: 150,
loop: true
});
});
</script>
</body>
</html>
and home-track.html in template folder where I want to add my Adsense Ad unit code and to show there:
<section id="device" class="ng-scope" ng-controller="recentStation">
<div class="info_section_inner">
<div class="info_section_col" style="float: center;">
<p>
AAAA
</p>
</div>
<div class="container wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<div class="list_stations medium">
<div class="list_header clearfix">
<div class="stations-heading-h2 ng-binding" style="margin-bottom:25px; padding-top:25px; color:#000000;" ><p style="font-family:calibri; font-size:45px;">
Recent stations
</div>
</div>
<div class="list_body">
<div style="float: right; margin: 10px 0px 10px 10px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Shqipradio2 -->
<ins class="adsbygoogle hidead"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-123456789123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- ngRepeat: chn in channels --><div class="list_item ng-scope" ng-repeat="chn in channels">
<div class="bg">
<a class="image_outer" href="channel/{{chn.slug}}"> <span class="image"><img ng-src="{{chn.channel_image}}" alt="tea cup match" style="overflow:hidden;" width="100%" height="100%" itemprop="image" src="{{chn.channel_image}}" class="hoverZoomLink"></span>
<span class="overlay">
<!-- -->
</span>
<span class="country ng-binding"></span>
</a>
<div class="name" itemprop="name" >
{{chn.channel_name}}
</div>
</div>
</div>
</div>
<div class="list_footer clearfix">
All stations
<br>
</div>
</div>
</div></section>
So when I paste the ad unit code in index.php everything is good but the ads showing up before header or after footer, so I want to implement in home-track.html and to show here I want. When I paste the code to home-track.html there is the space for ads like my height and weight but ad is not showing up.
PS. I don't want to implement quickads from adsense, just to paste my Ad Unit code.
I have paste also my quick ad code in index.php but I will remove from there.
thanks


when I paste this code its working:
<style>
#media (max-width: 480px) {
.hidead {
display: none !important;
}
}
</style>
<div style="float: right; margin: 10px 0px 10px 10px;">
<iframe width="300" height="600" frameborder="0" class="adsbygoogle hidead"
src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-
123456789123456&output=html&h=600&slotname=1234567890&amp">
</iframe>
</div>
its everything good the ads are in the place where I want to be. But why when I paste the code that google give to me doestn show:
<style>
#media (max-width: 480px) {
.hidead {
display: none !important;
}
}
</style>
<div style="float: right; margin: 10px 0px 10px 10px;">
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Shqipradio2 -->
<ins class="adsbygoogle hidead"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-123456789123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
Its something wrong to use this code with

Related

My Bootstrap Carousel doesn't change when i add a video into the slides?

I have a bootstrap carousel that works perfectly when i only have images included, but as soon as i add a video, my indicators don't work and i can't click through the remaining slides? Does anyone know what i've done wrong? Here is my code with a little bit of dodgy php:
echo "<div class='carousel-item";
if ($caroselCount == "1") { echo " active"; }
echo "'>";
if($extraPicDetails['file_type'] == "image") {
echo "<img src='Members/".$Details['file_name']."' alt='' style='margin: auto; display: block; background-color: #ffffff;'>";
}
elseif($extraPicDetails['file_type'] == "video") {
echo "<video src='Members/".$Details['file_name']."' loop autoplay muted playsinline width='100%' style='display: block;'>";
}
echo "</div>";
$caroselCount = "0";
All works fine if i just loop through a bunch of pics, but if there are a couple of images and a video... NOPE! Can't click through the slides, can anyone help me please?
Here is the rendered code:
<div class="carousel-inner">
<div class='carousel-item active'>
<video src='Members/44_Pic1_ezgifcomgifmaker.mp4' loop autoplay muted playsinline width='100%' style='display: block;'>
</div>
<div class='carousel-item'>
<img src='Members/44_Pic2_Polish_20200814_165321683.jpg' alt='' style='margin: auto; display: block; background-color: #ffffff;'>
</div>
<div class='carousel-item'>
<img src='Members/44_Pic1_image.jpg' alt='' style='margin: auto; display: block; background-color: #ffffff;'>
</div>
</div>

I tried to reproduce your error but it works all fine. I downloaden a video and images from pixabay and loaded bootstrap 4 through cdn links. Instead of inline css I use the bootstrap class img-fluid to make the media fit better in the carousel, I disabled the indicators in my example.
Below the code I tested:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- <ul class="carousel-indicators">-->
<!-- <li data-target="#demo" data-slide-to="0" class="active"></li>-->
<!-- <li data-target="#demo" data-slide-to="1"></li>-->
<!-- <li data-target="#demo" data-slide-to="2"></li>-->
<!-- </ul>-->
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-inner">
<div class='carousel-item active'>
<video src='media/Golden - 48569.mp4' loop autoplay muted playsinline class="img-fluid">
</div>
<div class='carousel-item'>
<img src='media/20201102_14%20-%20Foto.jpg' alt='' class="img-fluid">
</div>
<div class='carousel-item'>
<img src='media/20201102_17%20-%20Fotoe.jpg' alt='' class="img-fluid">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Modal button in sortable li tag not clickable on mobile devices

I am making the mobile version of a php website that has a sortable list.
Inside the li tag there are three divs, the first and the second are clickable and should open a modal window.
<ul id='sortable'>
//...multiple li tags
<li class='ui-state-default row'>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-edit' onclick='modificaModale()'>
<i class='fas fa-edit iconeScheda'></i>
</div>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-elimina-esercizio' onclick='eliminaModale()'>
<i class='fas fa-trash-alt iconeScheda'></i>
</div>
<div class='col-sm-10 col-xs-10'>
<b>Name of exercise</b>
</div>
</li>
//...
</ul>
On a desktop browser everything works fine but on mobile devices the two divs are not clickable and the modal won't open.
If I remove the sortable the modal opens on mobile too.
My head tag looks like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
function modificaModale(id) {
//do stuff
}
function eliminaModale() {
//do stuff
}
$(function () {
$("#sortable").sortable({
axis: 'y',
type: 'li',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'some url'
});
}
});
});
</script>
</head>
and the style of those
#sortable { list-style-type: none; margin: 0; padding: 0; cursor: grab;}
#sortable li span { position: absolute; margin-left: -1.3em; }
.iconeScheda{
cursor:pointer;
font-size: 20px;
padding: 5px;
font-weight: 100;
}
one of my modal is like this (the other is pretty much the same)
<div class="modal fade" id="confirm-elimina-esercizio" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" style="background: none">
<div class="modal-dialog">
<div class="modal-content">
<form action="eliminaScheda.php" method="post">
<input type="text" name="id" id="idElimina" style="display:none"/>
<div class="modal-header">
<h3>Elimina</h3>
</div>
<div class="modal-body">
Sei sicuro di voler eliminare <span id="esercizioModale"></span>?
</div>
<div class="modal-footer">
<input type="submit" value="Conferma"/>
<input type="button" data-dismiss="modal" value="Annulla"/>
</div>
</form>
</div>
</div>
</div>
Without the "sortable" id, the modals open normally.
Here pictures of the web:
desktop version here
and the mobile version:
mobile version here
Thanks in advance

As I checked code in codepen
codepen.io/nickjackson139/pen/PoorWOG in mobile view it is opening model.
function modificaModale(id) {
//do stuff
}
function eliminaModale() {
//do stuff
}
$(function() {
$("#sortable").sortable({
axis: 'y',
type: 'li',
update: function(event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: 'some url'
});
}
});
});
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
cursor: grab;
}
#sortable li span {
position: absolute;
margin-left: -1.3em;
}
.iconeScheda {
cursor: pointer;
font-size: 20px;
padding: 5px;
font-weight: 100;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<ul id='sortable'>
<li class='ui-state-default row'>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-edit' onclick='modificaModale()'>
<i class='fas fa-edit iconeScheda'></i>
</div>
<div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-elimina-esercizio' onclick='eliminaModale()'>
<i class='fas fa-trash-alt iconeScheda'></i>
</div>
<div class='col-sm-10 col-xs-10'>
<b>Name of exercise</b>
</div>
</li>
</ul>
<div class="modal fade" id="confirm-elimina-esercizio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="background: none">
<div class="modal-dialog">
<div class="modal-content">
<form action="eliminaScheda.php" method="post">
<input type="text" name="id" id="idElimina" style="display:none" />
<div class="modal-header">
<h3>Elimina</h3>
</div>
<div class="modal-body">
Sei sicuro di voler eliminare <span id="esercizioModale"></span>?
</div>
<div class="modal-footer">
<input type="submit" value="Conferma" />
<input type="button" data-dismiss="modal" value="Annulla" />
</div>
</form>
</div>
</div>
</div>

Laravel blade #extends doesn't work

I have strange issue in laravel blade everything works normally until I edit something in the file the master layout stop loading correctly for no reason
sometime the page html content load partially
It works fine on localhost but on the server
I stopped cloudflare and all caches
As I said the issue occurs only when I edit some file only that page stop working the other pages works normally unless I edit them or add something to them
I hope you can help me.
master file
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<link rel="icon" type="image/png" href="{{asset('../storage/app/public/Favicon_reviews.png')}}">
<title>
{{(is_array(($web_title ?? ''))? $web_title[1] ?? '': $web_title ?? '') ?? 'Home'}}
</title>
{{--foundation css--}}
<link rel="stylesheet" href="{{asset('css/foundation.css')}}">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="{{asset('css/dashboard.css')}}">
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/dripicon.css')}}">
<link rel="stylesheet" href="{{asset('css/typicons.css')}}">
<link rel="stylesheet" href="{{asset('css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{asset('css/theme.css')}}">
<link rel="stylesheet" href="{{asset('css/jquery.toastmessage.css')}}">
<link rel="stylesheet" href="{{asset('js/circle-progress/jquery.circliful.css')}}">
<!-- pace loader -->
{{--for top blue line loader--}}
<script src="{{asset('js/pace/pace.js')}}"></script>
<link rel="stylesheet" href="{{asset('js/pace/themes/green/pace-theme-flash.css')}}">
{{--<link rel="stylesheet" href="{{asset('js/pace/themes/templates/pace-theme-barber-shop.tmpl.css')}}">--}}
{{-- <link rel="stylesheet" href="{{asset('js/pace/themes/green/pace-theme-big-counter.css')}}">--}}
{{--end pace--}}
<link rel="stylesheet" href="{{asset('js/slicknav/slicknav.css')}}">
{{--to support effects in old broswer--}}
<script src="{{asset('js/vendor/modernizr.js')}}"></script>
<link rel="stylesheet" href="{{asset('css/main-style.css')}}">
{{--js scripts--}}
#yield('css')
</head>
<body>
<!-- preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<!-- End of preloader -->
<div class="off-canvas-wrap content" data-offcanvas>
<!-- right sidebar wrapper -->
<div class="inner-wrap">
<!-- Right sidemenu -->
<div id="skin-select">
<!-- Toggle sidemenu icon button -->
<a id="toggle">
<span class="fa icon-menu"></span>
</a>
<!-- End of Toggle sidemenu icon button -->
<div class="skin-part">
<div id="tree-wrap">
#include('main.left-nav')
</div>
</div>
</div>
<!-- end of Rightsidemenu -->
<div class="wrap-fluid" id="paper-bg">
<!-- top nav -->
<div class="top-bar-nest">
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
#include('main.top-nav')
</nav>
</div>
<!-- end of top nav -->
<!-- breadcrumbs -->
<ul class="breadcrumbs ">
<li><a href="{{url('/')}}"><span style=" font-size: 15px; position: relative; top: -3px;"
class="fa fa-home"></span></a>
</li>
#if(is_array(($web_title ?? false)))
#foreach($web_title as $title)
<li>
{!! $title ?? '' !!}
</li>
#endforeach
#else
<li>
{{$web_title ?? ''}}
</li>
#endif
{{--<li>{{$web_title}}
</li>--}}
</ul>
<!-- end of breadcrumbs -->
<!-- Container Begin -->
<div class="row" style="margin-top:-20px">
#yield('container')
</div>
<!-- End of Container Begin -->
#include('main.footer')
</div>
<!-- Right Menu -->
<aside class="right-off-canvas-menu">
{{--#include('main.right-nav')--}}
</aside>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
<!-- End of Right Menu -->
</div>
<!-- end paper bg -->
</div>
<!-- end of off-canvas-wrap -->
<!-- end of inner-wrap -->
<!-- main javascript library -->
<script src="{{asset('/js/jquery.js')}}"></script>
<script src="{{asset('/js/waypoints.min.js')}}"></script>
<script src="{{asset('/js/preloader-script.js')}}"></script>
<!-- foundation javascript -->
<script src="{{asset('/js/foundation.min.js')}}"></script>
<script src="{{asset('/js/foundation/foundation.dropdown.js')}}"></script>
<!-- main edumix javascript -->
{{--add scroll bar to divs--}}
<script src="{{asset('/js/slimscroll/jquery.slimscroll.js')}}"></script>
{{--mobile menu--}}
<script src="{{asset('/js/slicknav/jquery.slicknav.js')}}"></script>
<script src="{{asset('/js/sliding-menu.js')}}"></script>
<script src="{{asset('/js/scriptbreaker-multiple-accordion-1.js')}}"></script>
<script src="{{asset('/js/number/jquery.counterup.min.js')}}"></script>
<script src="{{asset('/js/circle-progress/jquery.circliful.min.js')}}"></script>
<script src="{{asset('/js/jquery.toastmessage.js')}}"></script>
<script src="{{asset('/js/app.js')}}"></script>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
</script>
<script type="text/javascript">
(function ($) {
"use strict";
})(jQuery);
</script>
<script>
$(document).foundation();
</script>
<script>
/*helper functions*/
function confirm(title, message, callback) {
// create your modal template
var modal = '<div class="reveal-modal tiny" id="confirmation" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-animation-in="slide-in-down">' +
'<h2>' + title + '</h2>' +
'<p class="lead">' + message + '</p>' +
'<button class="button success yes" style="margin-right: 50px;">Yes</button>' +
'<button class="button alert float-right close-reveal" >No</button>' +
'</div>';
// appending new reveal modal to the page
$('body').append(modal);
// registergin this modal DOM as Foundation reveal
/* var confirmation = new Foundation.Reveal($('#confirmation'));
// open
confirmation.open();*/
var confirm_selector = $('#confirmation');
confirm_selector.foundation('reveal', 'open');
// listening for yes click
confirm_selector.children('.yes').on('click', function () {
// close and REMOVE FROM DOM to avoid multiple binding
confirm_selector.foundation('reveal', 'close');
confirm_selector.remove();
// calling the function to process
callback.call();
});
$(document).on('closed.zf.reveal', '#confirmation', function () {
// remove from dom when closed
confirm_selector.foundation('reveal', 'close');
});
}
$(document).on('click', '.close-reveal', function () {
$('#confirmation').foundation('reveal', 'close');
});
</script>
{{--header javascript--}}
{{--search process img--}}
<script>
$(document).ready(function () {
$('#search_form').submit(function (e) {
$('#search_loading').show();
});
});
</script>
<script>
$(document).ready(function () {
$('#contact_us_form').submit(function (event) {
event.preventDefault();
$('.message_button').prop('disabled', true);
$.ajax({
url: '{{url('/contact_us')}}',
type: 'POST',
data: $(this).serialize(),
success: function (data) {
// console.log(data);
$().toastmessage('showToast', {
text: data.success,
stayTime: 3000,
sticky: false,
position: 'top-center',
type: 'success',
closeText: '',
close: null
});
$('.message_button').prop('disabled', false);
$('#requests').foundation('reveal', 'close');
$("#contact_us_form")[0].reset();
}
});
})
});
</script>
{{--request form--}}
<script>
$(document).ready(function () {
$('#requests_form').submit(function (event) {
event.preventDefault();
$('.message_button').prop('disabled', true);
$.ajax({
url: '{{url('/contact_us')}}',
type: 'POST',
data: $(this).serialize(),
success: function (data) {
$().toastmessage('showToast', {
text: data.success,
stayTime: 3000,
sticky: false,
position: 'top-center',
type: 'success',
closeText: '',
close: null
});
$('.message_button').prop('disabled', false);
$('#requests').foundation('reveal', 'close');
$("#requests_form")[0].reset();
}
});
})
});
</script>
<script>
$('.input_option').change(function () {
if ($(this).val() == 'tag') {
$('.tag_messages').html('You can add more then one tag by adding comma Ex(tag1,tag2,.....)');
} else {
$('.tag_messages').html('');
}
});
</script>
<script>
var textarea = null;
window.addEventListener("load", function () {
textarea = window.document.querySelector("#contact_area");
textarea.addEventListener("keypress", function () {
if (textarea.scrollTop != 0) {
textarea.style.height = textarea.scrollHeight + "px";
}
}, false);
}, false);
</script>
<script>
var textarea = null;
window.addEventListener("load", function () {
textarea = window.document.querySelector("#contact_area1");
textarea.addEventListener("keypress", function () {
if (textarea.scrollTop != 0) {
textarea.style.height = textarea.scrollHeight + "px";
}
}, false);
}, false);
</script>
#yield('javascript')
</body>
</html>
Home page
#extends('main.master')
#section('container')
<div class="row" style="margin-top:-20px">
<div class="large-12 columns">
<blockquote style="border-right: 3px solid #8c92a3;text-align: center;margin-top: 5px;">
Thank you for installing the application, please take a moment of your time and rate the app. It will help us to improve the application for you.
<a>Rate Here</a>
</blockquote>
</div>
</div>
<div class="row" >
<div class="large-8 columns">
<div class="box bg-transparent ">
<!-- /.box-header -->
<div class="box-header no-pad bg-transparent">
<h3 style="margin-bottom:20px;" class="box-title">
<span>Daily Visitors</span>
</h3>
</div>
<div class="box-body no-pad">
<div id="line-chart" style="height: 235px; padding: 0px; position: relative;">
<canvas class="flot-base"
style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 785px; height: 235px;"
width="863" height="258"></canvas>
<div class="flot-text"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
<div class="flot-x-axis flot-x1-axis xAxis x1Axis"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
</div>
</div>
<canvas class="flot-overlay"
style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 785px; height: 235px;"
width="863" height="258"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<div class="large-4 columns">
<div class="box bg-transparent ">
<!-- /.box-header -->
<div class="box-header no-pad bg-transparent">
<h3 style="margin:0 20px 0 -5px;" class="box-title">
<span>Visitors</span>
</h3>
</div>
<div style="margin:15px 0 0" class="box-body no-pad">
<div class="stats-wrap">
<h2><b class="counter-up" style="color:#666;">{{$counter_visitors_data[0]['year'] ?? 0 }}</b> <span
style="background:#666;">+<b
class="counter-up">{{($counter_visitors_data[0]['year_rating'] ?? 0) <= 100 ? ($counter_visitors_data[0]['year_rating']?? 0): 100 }}</b>%</span>
</h2>
<p class="text-grey">Total Visitors
<small>This Year vs last year</small>
</p>
<h4><b class="counter-up" style="color:#888;">{{$counter_visitors_data[1]['month'] ?? 0 }}</b> <span
style="background:#888;">+<b
class="counter-up">{{($counter_visitors_data[1]['month_rating'] ?? 0) <= 100 ? ($counter_visitors_data[0]['month_rating'] ?? 0):100}}</b>%</span>
</h4>
<p>New Visitors
<small>This Month</small>
</p>
<h4 style="color:#333;"><b class="counter-up">{{$counter_visitors_data[2]['week'] ?? 0 }}</b> <span
style="background:#333;">+<b
class="counter-up">{{($counter_visitors_data[2]['week_rating'] ?? 0) <= 100 ? ($counter_visitors_data[0]['week_rating']?? 0):100}}</b></span></h4>
<p>New Visitors
<small>This week</small>
</p>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
{{------------------------------------------section 2---------------------------------------}}
<div class="row" style="margin-top: 20px;">
<div class="large-4 columns">
<div class="box bg-transparent ">
<!-- /.box-header -->
<div class="box-header no-pad bg-transparent">
<h3 style="margin:0 20px 0 -5px;" class="box-title">
<span>Reviews</span>
</h3>
</div>
<div style="margin:15px 0 0" class="box-body no-pad">
<div class="stats-wrap">
<h2><b class="counter-up" style="color:#666;">{{$counter_reviews_data[0]['year'] ?? 0 }}</b> <span
style="background:#666;">+<b
class="counter-up">{{($counter_reviews_data[0]['year_rating'] ?? 0) <= 100 ? ($counter_reviews_data[0]['year_rating']?? 0):100}}</b>%</span>
</h2>
<p class="text-grey">Total Reviews
<small>This Year vs last year</small>
</p>
<h4><b class="counter-up" style="color:#888;">{{$counter_reviews_data[1]['month']?? 0 }}</b> <span
style="background:#888;">+<b
class="counter-up">{{($counter_reviews_data[1]['month_rating'] ?? 0) <= 100 ? ($counter_reviews_data[1]['month_rating']?? 0):100}}</b>%</span>
</h4>
<p>New Reviews
<small>This Month</small>
</p>
<h4 style="color:#333;"><b class="counter-up">{{$counter_reviews_data[2]['week']?? 0 }}</b> <span
style="background:#333;">+<b
class="counter-up">{{($counter_reviews_data[2]['week_rating'] ?? 0) <= 100 ? ($counter_reviews_data[2]['week_rating']?? 0):100 }}</b>%</span></h4>
<p>New Reviews
<small>This week</small>
</p>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<div class="large-4 columns">
<div class="bg-complete-profile">
<span class="bg-green fa fa-star"></span>
<!-- <img src="img/bag.png"> -->
<h6 class="bg-black text-white"><strong><a href="https://apps.shopify.com/aliexpress-reviews-2"
style="color: #ffffff;">Rate Application</a></strong></h6>
</div>
</div>
<div class="large-4 columns">
<div class="bg-complete-profile">
<span class="bg-green fontello-doc-1"></span>
<!-- <img src="img/box.png"> -->
<h6 class="bg-black text-white">FAQ</h6>
</div>
</div>
<div class="large-4 columns">
<div class="bg-complete-profile">
<span class="bg-green icon-user-group"></span>
<!-- <i class="img/count.png"></i> -->
<h6 class="bg-black text-white"><a href="{{url('visitors')}}" style="color: #ffffff;">Latest
Visitors</a></h6>
</div>
</div>
<div class="large-4 columns">
<div class="bg-complete-profile">
<span class="bg-green fontello-params"></span>
<!-- <i class="img/count.png"></i> -->
<h6 class="bg-black text-white"><a href="{{url('General_options')}}" style="color: #ffffff;">Main
Setting</a></h6>
</div>
</div>
</div>
{{------------------------------------------section 3---------------------------------------}}
<div class="large-12 columns">
<div class="box">
<div class="box-header bg-transparent">
<!-- tools box -->
<div class="pull-right box-tools">
<span class="box-btn" data-widget="collapse"><i class="icon-minus"></i>
</span>
<span class="box-btn" data-widget="remove"><i class="icon-cross"></i>
</span>
</div>
<h3 class="box-title"><i class=" icon-calendar"></i>
<span>Latest Visitor</span>
</h3>
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<style>
#media screen and (max-width: 1400px) {
.visitors_images {
left: 60% !important;
}
}
#media screen and (max-width: 1000px) {
.visitors_images {
left: 50% !important;
top: 43px !important;
}
}
#media screen and (max-width: 700px) {
.visitors_images {
left: 65% !important;
top: 43px !important;
}
}
</style>
<div class="row">
<?php $counter = 0; ?>
#foreach($visitors as $visitor)
<?php
$product_id = $visitor['product_id'];
$country_code = $visitor['country_code'];
?>
<div class="large-4 medium-6 small-12 columns" style="float: left !important;">
<div class="school-timetable">
<hr>
<h5><span style="background: #92CD18;">New</span><strong> Visitor </strong>For
Product:<i><a
href="{{url("comments/$product_id/$shop")}}"
target="_blank">
{{str_limit(($visitor['product']['products'][0]['title'] ?? 'No Title'),17) }}
</a></i></h5>
<h6><i class=" fontello-home-outline"></i> From <span
style="background: transparent;"><img style="margin-bottom: 5px;"
src="{{url("images/flags").'/'.strtolower($country_code).'.png' ?? ''}}"></span>
</h6>
<h6 style="margin-bottom: 20px;"><i
class=" fontello-clock"></i>{{date('D, F y',strtotime($visitor['created_at'] ?? ''))}}
y
<span
class="bg-black">{{date('g a',strtotime($visitor['created_at'] ?? ''))}}</span>
</h6>
<div class="visitors_images" style=" position: absolute;
left: 56%;
top: 43px;">
<img width="50px"
src="{{$visitor['product']['products'][0]['images'][0]['src'] ?? URL::asset('../storage/app/public/NoPicAvailable.png')}}">
</div>
</div>
</div>
<?php $counter ++; ?>
#endforeach
</div>
</div>
<!-- /.box-body -->
</div>
</div>
#endsection
#section('javascript')
<script src="{{URL::to('/js/flot/jquery.flot.js')}}"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="{{URL::to('/js/flot/jquery.flot.resize.min.js')}}"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="{{URL::to('/js/flot/jquery.flot.pie.min.js')}}"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="{{URL::to('/js/flot/jquery.flot.categories.min.js')}}"></script>
<script type="text/javascript">
<?php $counter_days = 1;?>
var ticks = [
#foreach($numbers_of_visitors_last_10_days as $keys=>$dates )
#if($counter_days <=1)
[{{ltrim($keys,'0')}}, "days {{ltrim($keys,'0')}}"],
#else
[{{ltrim($keys,'0')}},{{ltrim($keys,'0')}}],
#endif
<?php $counter_days ++;?>
#endforeach
];
$(function () {
"use strict";
/*
* LINE CHART
* ----------
*/
var line_data2 = [
#foreach($numbers_of_visitors_last_10_days as $keys=>$dates )
[{{ltrim($keys,'0')}}, {{count($dates)}}],
#endforeach
];
var xaxisLabel = $("<div class='axisLabel xaxisLabel'></div>")
.text("My X Label")
.appendTo($('#line-chart'));
$.plot("#line-chart", [line_data2], {
grid: {
hoverable: true,
borderColor: "#E2E6EE",
borderWidth: 1,
tickColor: "#E2E6EE"
},
series: {
shadowSize: 2,
lines: {
show: true
},
points: {
show: true
}
},
colors: ["#333333", "#cccccc"],
lines: {
fill: true,
},
yaxis: {
show: true,
tickFormatter: function (val, axis) { return val }
},
xaxis: {
show: true,
ticks: ticks,
}
});
});
</script>
#endsection

I think it because of cached views. laravel make all the pages and save them in storage/framework/views directory.So that it won't have to make the pages from scratch in every request. And make the loading faster.
type this on cmd after editing the files:
php artisan view:clear
Or you can delete them manually.
after that type this on cmd:
composer dump-autoload
Then laravel has to make the pages and save them again.
Hope it would help!

how to show jquery rating in html <list> tag in while loop using multiple tables

i want to show rating of each item or name of company with company name (driven from another table in database) in "li" tag of html (transporters.php). I have got the rating for each company page individually (transporters2.php) but i want to get all the ratings of all the companies or items in "li" tab so user can overview it and after clicking an "li" item it will show the profile of company "transporters2.php". Here are my two files transporters.php and transporters2.php and also their snapshots.
transporters.php and transporters2.php ,Mydatabase
Note: Both files are working correctly there is no syntax error, if an error occurs that might be occurred while posting the question thanks.
Transporters.php
<?php
include "header.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="../js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/rating.css" />
<script type="text/javascript" src="../js/rating.js"></script><title>Transporters</title>
<!-- Bootstrap Core CSS -->
<link href="file:///C|/xampp/htdocs/bin/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="file:///C|/xampp/htdocs/bin/css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="file:///C|/xampp/htdocs/bin/font-awesome/css/font
awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="../css/example.css" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Transporters
<small> Companies</small>
</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Transporters</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<div class="row">
<div class="col-lg-12"><?php
require("Config.php");
$sql =mysql_query("SELECT * FROM transporters");
?>
<ul style="list-style:none;">
<?php while($row=mysql_fetch_array($sql) )
{
$cid=$row['CompanyID'];
?>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<li><div class="product" style="font: 10px verdana, sans-serif;margin: 0 auto 40px auto;width: 71px;height: 4px;margin-right: 75%;">
<div id="<?php echo $cid ?>" class="ratings" style="border: 1px solid #CCC;overflow: visible;padding: 10px;position: relative;width: 182px;height: 47px;float: left;margin-left: -195px;"><div class="star_1 ratings_stars ratings_vote"></div><div class="star_2 ratings_stars ratings_vote"></div><div class="star_3 ratings_stars ratings_vote"></div><div class="star_4 ratings_stars ratings_blank"></div><div class="star_5 ratings_stars ratings_blank"></div>
</div>
<a href='transporters2.php?CompanyID=<?php echo $cid;?>'><?php print $row['CompanyName']; ?>
</a></div>
</li>
</div>
</div>
</div>
<?php
}//end of while loop
?>
</ul>
</div>
</div>
<script>
function sendcompanyname()
{
var x= document.getElementById("cpn").value;
}
</script>
</body></html>
Transporters2.php
<?php
$db=mysqli_connect("localhost","root","","db1") or die("unable to connect");
include("header.php");
$cname;
if(isset($_GET['CompanyID'])){
$CompanyID = $_GET['CompanyID'];
$get_name= "SELECT * from `transporters` where `CompanyID`='$CompanyID'";
$run_name= mysqli_query($db,$get_name);
while($row_name=mysqli_fetch_array($run_name)){
$cname = $row_name['CompanyName'];}
}
include("settings.php");
connect();
$ids=array(1);
?>
<!DOCTYPE html>
<html>
<head>
<script src="../js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/rating.css" />
<!--<script type="text/javascript" src="../js/rating.js"></script>-->
<script>
$(document).ready(function() {
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function(){
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
//send ajax request to rate.php
$('.ratings_stars').bind('click', function(){
var id=$(this).parent().attr("id");
var num=$(this).attr("class");
var poststr="id="+id+"&stars="+num;
$.ajax({url:"../bin/rate.php",cache:0,data:poststr,success:function(result){
document.getElementById(id).innerHTML=result;}
});
});
});
</script>
</head>
<body>
<!-- Page Content -->
<div class="container">
<!-- /.row -->
<div class="row">
<?php
for($i=0;$i<count($ids);$i++)
{
$rating_tableName = 'ratings';
$id=$CompanyID;
$q="SELECT total_votes, total_value FROM $rating_tableName WHERE id=$id";
$r=mysql_query($q);
if(!$r) echo mysql_error();
while($row=mysql_fetch_array($r))
{
$v=$row['total_votes'];
$tv=$row['total_value'];
$rat=$tv/$v;
}
$id=$CompanyID;
$j=$id;
echo'<div class="product">
Rate Item '.$j.'
<div id="rating_'.$id.'" class="ratings">';
for($k=1;$k<6;$k++){
if($rat+1>$k)$class="star_".$k."ratings_stars ratings_vote";
else $class="star_".$k." ratings_stars ratings_blank";
echo '<div class="'.$class.'"></div>';
}
echo' <div class="total_votes"><p class="voted"> Rating
<strong>'.#number_format($rat).'</strong>/5 ('.$v. 'vote(s) cast)
</div>
</div></div>';}
?>
<div class="col-lg-12">
<h2 class="page-header"><?php echo $cname;?></h2>
</div>
<!--<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-car fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Show Drivers</h4>
<p>Show drivers of this company.</p>
<button id="popup" onclick="div_show()" class="btn btn
primary">Add</button>
</div>
</div>
</div>-->
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-support fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Show routes</h4>
<p>check which routes are following this company...</p>
<a href="routes.php?CompanyID=<?php echo $CompanyID;?>" class="btn btn
primary">show routes</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Schedule</h4>
<p>Check the timings of journey.</p>
Show Schedule
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Show Drivers Positions</h4>
<p>Check the positions of all drivers.</p>
<a href="positions.php" class="btn btn-primary">Show Drivers
Positions</a>
</div>
</div>
</div>
</div>
</div>
<!---END Page Content-->
</body>
</html>

Coding lines appear after each closed div. (only in DOM inspector)

I had some very strange annoying results while working on my 'project'.
To loop through MySQL results I used a while loop.
One of the lines echo'ed in the while loop now keeps appearing after every closed div.
This is only visible in firebug or another DOM inspector and not in the source code.
I have no idea what is causing it, so any help is appreciated.
Underneath I included all the code involved.
Thanks,
Sam
Btw. This is still in early development so please take that into consideration.
Code:
Firebug:
<div class="contentainer_wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="wrapper">
<div class="sidebar_navigation gradient">
<ul class="navigation">
<li id="nav1" class="active tip-right" style="height: auto;" data-original-title="Dashboard">
<li id="nav2" class="tip-right" style="height: auto;" data-original-title="Forms">
<li id="nav3" class="tip-right" style="height: auto;" data-original-title="UI Elements">
<li id="nav4" class="tip-right" style="height: auto;" data-original-title="Typography">
<li id="nav5" class="tip-right" style="height: auto;" data-original-title="Tables">
<li id="nav6" class="tip-right" style="height: auto;" data-original-title="Gallery">
<li id="nav7" class="tip-right" style="height: auto;" data-original-title="Grid">
<li id="nav8" class="tip-right" style="height: auto;" data-original-title="Charts">
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</ul>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
<div id="canvas" class="content_wrapper">This page was loaded succesfully :D</div>
<div id="loading_modal" class="modal hide fade">
</a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')"> </a>
</div>
<a class="i_charts" onclick="load_page('nav8', 'test.html')">
</body>
</html>
Php File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="author" content="Sam Kool">
<title>Admin panel</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../css/bootstrap-responsive.css"/>
<link rel="stylesheet" href="../css/style.css"/>
<!--[if IE 8]><link href="css/ie8.css" rel="stylesheet"><![endif]--><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body onLoad="prepare()">
<?php
session_start();
if(!isset($_SESSION['name'])){
header('Location: http://localhost/CMS/Admin/');
}
include ('../config.php');
?>
<div class="highligts_content">
<div class="container-fluid">
<div class="stats">
<div class="row-fluid">
<div class="span12">
<div class="statistics">
<ul class="quickstats">
<?php
$conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
$conn = mysql_select_db($config['db_db']);
$mysql['sql'] = " SELECT *
FROM admin_layout
WHERE enabled = '1' and type = 'quickstats'
";
$mysql['query'] = mysql_query($mysql['sql']);
while($row = mysql_fetch_array($mysql['query'])){
echo '<li> <img src="../img/icons/'.$row["image"].'" alt=""> <span>'.$row["title"].'</span> </li>';
}
mysql_close();
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contentainer_wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="wrapper">
<div class="sidebar_navigation gradient">
<ul class="navigation">
<?php
$i = 1;
$conn = mysql_connect($config['db_host'], $config['db_user'], $config['db_pass']);
$conn = mysql_select_db($config['db_db']);
$mysql['sql'] = " SELECT *
FROM admin_components
WHERE enabled = '1'
";
$mysql['query'] = mysql_query($mysql['sql']);
while($row = mysql_fetch_assoc($mysql['query'])){
echo '<li id="nav'.$i.'" class="tip-right" data-original-title="'.$row["title"].'" style="height: auto;">';
echo '<a class="'.$row["icon"].'" onClick="load_page(\'nav'.$i.'\', \''.$row["url"].'\')">';
echo '<span class="tab_label" style="visibility: visible;">'.$row["title"].'</span>';
echo '<span class="tab_info" style="visibility: visible;">'.$row["description"].'</span></li>';
$i ++;
}
mysql_close();
?>
</ul>
</div>
</div>
<div class="content_wrapper" id="canvas">
</div>
<div class="modal hide fade" id="loading_modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Loading....</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function load_page(id, component){
if($('#'+id).attr('class') == 'active tip-right'){
alert('nope');
return;
}
$('.navigation li').each(function(i){
var myClass = $(this).attr("class");
if(myClass == 'active tip-right'){
$(this).attr('class', 'tip-right');
}
});
$('#'+id).attr('class', 'active tip-right');
$('#loading_modal').modal('show');
setTimeout(function(){
$('#canvas').load('/SCMS/admin/components/'+component, function(){
$('#loading_modal').modal('hide');
});
},1000);
}
function prepare(){
$('#nav1').attr('class', 'active tip-right');
$('#canvas').load('/SCMS/admin/components/dashboard.php');
$('#loading_screen').modal({
keyboard: false,
hide: true
})
}
</script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
</body>
</html>

The DOM inspector is almost always correct, your HTML source is wrong. When things like this happen, it usually indicates you forgot to close a tag, or that you closed them in the wrong order.
This is an extremely easy mistake to make when echoing out html, because you dont usually have indentation or IDE color coding to help you out.
In your second while loop, it appears you opened an a tag and didnt echo out the closing tag.
echo '<li id="nav'.$i.'" class="tip-right" data-original-title="'.$row["title"].'" style="height: auto;">';
//OPENED AN A TAG HERE
echo '<a class="'.$row["icon"].'" onClick="load_page(\'nav'.$i.'\', \''.$row["url"].'\')">';
echo '<span class="tab_label" style="visibility: visible;">'.$row["title"].'</span>';
echo '<span class="tab_info" style="visibility: visible;">'.$row["description"].'</span></li>';
//OOPS, ENDED LI WITHOUT ENDING A

Categories