I have a simple accordion menu, but it's not opening when click.
The div is display:none, but when click in h3 title to show, not is happening.
<section class="informacoes">
<h3 class="h3">Informações Técnicas</h3> <!-- Click to open -->
<div class="cont">
<p>123 Test</p>
</div>
</section>
Style
h3.h3{ cursor: pointer; }
.cont{ display: none; }
Script
$(document).ready(function(){
$('h3.h3').click(function(){
$(this).parent().find('.cont').slideToggle("slow");
});
});
Try this:
$(document).ready(function () {
$('h3.h3').click(function () {
$(this).parent().find('.cont').slideToggle("slow");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="informacoes">
<h3 class="h3">Informações Técnicas</h3> <!-- Click to open -->
<div class="cont" style="display: none;">
<p>123 Test</p>
</div>
</section>
this code is not working to display data from mysql using php and angularjs
html code -
<div class="container" ng-app="shoppingcart"
ng-controller="shoppingcartcontroller"> <div class="row " >
<div class="box col-md-3" style="margin-top: 20px;" ng-repeat="p in
products">
<div style="border: 1px solid #ccc; background-color: #f4f5f6">
<img src="/images/{{p.image}}.jpg" class="img img-responsive">
<h3>{{p.name}}</h3>
<h3>{{p.price}}</h3>
</div> </div>
</div> </div>
angular code -
<script >
var app=angular.module("shoppingcart",[]);
app.controller("shoppingcartcontroller",function($http,$scope){
$scope.loadproduct=function(){
$http.get("fetch.php").success(function(data){
$scope.products=data;
});
};
});
</script>
A simple example
HTML
<div ng-repeat="p in products">
{{p.name}}
{{p.price}}
</div>
JS
var app=angular.module("shoppingcart",[]);
app.controller("shoppingcartcontroller",function($http,$scope){
$scope.loadproduct=function(){
$http.get("fetch.php").then(function(response){
$scope.products=response.data;
});
};
});
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!
I am building a page where I am fetching images in a loop for each form name.Now suppose there are four forms,so there will be four slider consecutively one below the other.Now the problem I am facing is that when I am fetching the first slider images are only visible others are not,others are blank.I thing because the slider are not unique because the slider div id are same for all within the while loop.Can any one guide me how to solve this...and make each slider unique.
<div id="now_slider">
<?php
include( "connect.php");
$a=mysql_query( "Select * from bang where active=1");
$i=0;
while($res=mysql_fetch_array($a)) {
$name=$res[ "t"];
$pdf=$res[ "pt"];
$id=$res[ "f"];
?>
<h1><?php echo $name; ?><span></span></h1>
<br />
<!-- DC Flick Slider Start -->
<div style="width: 100%; margin:0 auto; padding: 0px 0; position:relative;">
<!-- navigation controls-->
<div class="navig-photo-stack ps">
<a class="prev"></a>
<a class="next"></a>
</div>
<section id="slide">
<div id="ps-slider" class="ps-slider">
<!-- Slide 1 -->
<div id="ps-albums">
<?php $b=mysql_query( "Select * from fim where f='$id'"); while($res1=mysql_fetch_array($b)) { $img=$res1[ "im"]; ?>
<div class="ps-album" style="opacity:0;">
<img src="forms/<?php echo $img; ?>" />
<div class="ps-desc">
<!--<div class="ps-head">
<h3></h3>
</div>-->
<!--<div class="ps-cont"> <span> </span> </div>-->
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<!-- /section slide -->
</div>
<?php if($pdf!="" ) { ?>
<h2><center>To Download the Form Click Below<br /><img src="images/pdf.png" alt="" width=80 height=80 /></center></h2>
<?php } ?>
<!-- DC Flick Slider End -->
<div class="clear"></div>
<?php } ?>
</div>
I have a button that I want to open a panel. Unfortunately my javascript is getting in the way. It's a notifications center in the panel and in order to retrieve the notifications I have to put javascript in the href of the link....but its not opening the open.
I put tags where the problem is that say THIS IS WHERE THE PROBLEM LIES.
If I change the href to #myContent then it will open, but in order for the script to work I need to to be javascript in the href.
Here's my code:
<? //PHP for getting username and database here ?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
}
</script>
<!-- BEGIN PAGE 1 -->
<div data-role="page" id="feed" data-add-back-btn="true">
<div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
<!--THIS IS THE LEFT PANEL-->
</div>
<div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
<center><img src="images/logo_app_white.png" height="25px"></center>
<!--THIS IS WHERE THE PROBLEM LIES-->
<? echo $number; ?>
</div>
<div data-role="content">
<!--This is where the content of the page goes-->
</div>
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
<div data-role="navbar" style="background: #ce8339;">
<ul>
<li>My Feed</li>
<li>Submit</li>
<li>Browse</li>
<li>Projects</li>
</ul>
</div>
<!-- /navbar -->
</div>
<div data-role="panel" id="myContent" data-position="right" data-display="overlay">
<!--THIS IS THE PANEL-->
</div>
</div>
<!-- END PAGE 1 -->
Why isn't the panel opening and how can I fix the issue.
Why put javascript in the 'href' tag and not in 'onclick'?
My guess is
<a href="javascript:void(0);" onclick="toggleDiv('myContent');">
will fix the issue.