I want to use jQuery Mobile to make a persistent tab. But when I apply this to my view, it will destroy my page. I'm using CodeIgniter.
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
It will make my search column become like this:
When I open the side bar or click the link from the persistent bar to open another page, the page that I open will look like this:
This is how i implement the jQuery Mobile in my view:
<!DOCTYPE html>
<html>
<head>
<title>home</title>
<link href="<?php echo base_url();?>css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="<?php echo base_url();?>js/jquery.min.js"></script>
<script src="<?php echo base_url();?>js/bootstrap.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="<?php echo base_url();?>css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Food shop Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="<?php echo base_url();?>js/move-top.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<link href="<?php echo base_url();?>css/index.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="<?php echo base_url();?>css/imgslider.css" type="text/css" media="screen" />
<script src="<?php echo base_url();?>js/slideout.min.js"></script>
<script src="<?php echo base_url();?>js/jquery.wmuSlider.js"></script>
<script src="<?php echo base_url();?>js/jquery.wmuGallery.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
</head>
<body>
<nav id="menu">
<h1 style="color:white">Menu</h1>
<hr style="color:white;">
<ul>
<?php if($tipeUser=="user"){?>
<li><h4 style="color:white">Welcome <?php echo $nama;?></h4></li>
<li><h4>Home</h4></li>
<li><h4>My Voucher</h4></li>
<li><h4>Profile</h4></li>
<li><h4>Restaurants</h4></li>
<?php
if($data_kategori->num_rows()>0)
{
foreach ($data_kategori->result() as $rows)
{ ?>
<li><h4><?php echo $rows->nama_jenis_makanan;?></h4></li>
<?php } } ?>
<li><h4>Faq</h4></li>
<li><h4>Blog</h4></li>
<li><h4>Logout</h4></li>
<?php } else if($tipeUser=="restoran"){ ?>
<li><h4 style="color:white">Welcome <?php echo $nama;?></h4></li>
<li><h4>Home</h4></li>
<li><h4>Dashboard</h4></li>
<li><h4>Voucher Management</h4></li>
<li><h4>Restaurants</h4></li>
<?php
if($data_kategori->num_rows()>0)
{
foreach ($data_kategori->result() as $rows)
{ ?>
<li><h4><?php echo $rows->nama_jenis_makanan;?></h4></li>
<?php } } ?>
<li><h4>Faq</h4></li>
<li><h4>Blog</h4></li>
<!-- <li><h4>Reedem Voucher</h4></li> -->
<li><h4>Logout</h4></li>
<?php } else if($tipeUser==""){ ?>
<li><h4>Home</h4></li>
<li><h4>Login / Register</h4></li>
<li><h4>Voucher</h4></li>
<li><h4>Restaurants</h4></li>
<?php
if($data_kategori->num_rows()>0)
{
foreach ($data_kategori->result() as $rows)
{ ?>
<li><h4><?php echo $rows->nama_jenis_makanan;?></h4></li>
<?php } } ?>
<li><h4>Faq</h4></li>
<li><h4>Blog</h4></li>
<?php } ?>
</ul>
</nav>
<main id="panel">
<header><!--header-->
<div class="header-in" >
<div class="container">
<!---->
<div class="header-bottom" >
<div class="col-xs-1">
<button class="toggle-button"></button>
</div>
<div class="col-xs-11">
<?php echo form_open('home_controller/search_bar',array('method' => 'get'));?>
<div class="search">
<form>
<input type="text" id= "input-keyword" name="input-keyword" placeholder="Search ..." value="<?php echo set_value('input-keyword')?>" >
<input type="submit" value="">
</form><?php echo form_close(); ?>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!---->
</div>
</div>
<!---->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-role="content">
<?php
if($dataSliderVoucher->num_rows()>0)
{ ?>
<div class="carousel-inner" role="listbox">
<?php
$i = 1;
foreach ($dataSliderVoucher->result() as $rowsSliderVoucher)
{
if($i==1)
{
?>
<div class="item active">
<center><img src="<?php echo $url_image;?>restaurant/<?php echo $rowsSliderVoucher->id_restoran?>/deals/<?php echo $rowsSliderVoucher->gambar_voucher?>" height="200em" class="img-responsive" alt=""></center>
</br>
</br>
</br>
<div class="carousel-caption">
<h2><b><?php echo $rowsSliderVoucher->nama_voucher?></b></h2>
</div>
</div>
<?php }
else
{ ?>
<div class="item">
<center><img src="<?php echo $url_image;?>restaurant/<?php echo $rowsSliderVoucher->id_restoran?>/deals/<?php echo $rowsSliderVoucher->gambar_voucher?>" height="200em" class="img-responsive" alt=""></center>
</br>
</br>
</br>
<div class="carousel-caption">
<h2><b><?php echo $rowsSliderVoucher->nama_voucher?></b></h2>
</div>
</div>
<?php }
$i++;} ?>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php } ?>
<!---->
<div id="loader"></div>
<div id="scroll-container" class="row">
<div class="container">
<div class="specials">
<?php if($dataLastDeals->num_rows()>0)
{
foreach ($dataLastDeals->result() as $rowsLastDeals)
{ ?>
<div class="col-xs-12" style="border:1px solid black;">
</br>
</br>
<?php if($tipeUser=="user" || $tipeUser==""){ ?>
<div class="actions">
<?php
if($rowsLastDeals->sisa_voucher > 0) {
?>
<center>
<a href="<?php echo base_url();?>home_controller/GetVoucher/<?php echo $rowsLastDeals->id_voucher;?>">
<img src="<?php echo base_url();?>.././img/restaurant/<?php echo $rowsLastDeals->id_restoran;?>/deals/<?php echo $rowsLastDeals->gambar_voucher;?>" class="img-responsive-search" alt="" style="object-fit: fill;height: 250px; ">
</a></center>
<div class="col-xs-6">
<h3 style="font-size: 3vw;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"><b><?php echo $rowsLastDeals->nama_restoran?></b></h3>
</div>
<div class="col-xs-6">
<h3 style="font-size: 3vw;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;" align="center">Available <?php echo $rowsLastDeals->sisa_voucher. ' Voucher'?> </h3>
</div>
<?php
}
else{ ?>
<img src="<?php echo base_url();?>.././img/restaurant/<?php echo $rowsLastDeals->id_restoran;?>/deals/<?php echo $rowsLastDeals->gambar_voucher;?>" class="img-responsive-search" alt="" style="object-fit: fill;height: 250px; ">
<div class="col-xs-6">
<h4 align="center" style="color:red; font-size: 3vw;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"><?php echo $rowsLastDeals->nama_restoran?> <br></h4>
</div>
<div class="col-xs-6">
<h4 align="center" style="color:red; font-size: 3vw;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">NOT AVAILABLE <br></h4>
</div>
<?php }
?>
</div>
<?php } ?>
<!-- End Product -->
</div>
<?php }} ?>
</div>
</div>
</div>
</header>
</main>
<?php $j=0; ?>
<div id="pages">
<?php
for($i=0; $i< $total_data; $i++)
{
?>
<?php $j=$j+8;
} ?>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Account</li>
<li>Voucher</li>
<li>Faq</li>
<li>Blog</li>
</ul>
</div>
</div> <!-- /footer -->
<?php if($this->session->flashdata('message')) :
echo "<script>alert('". $this->session->flashdata('message')."')</script>";
endif; ?>
<script src="<?php echo base_url();?>js/jquery-1.10.0.min.js"></script>
<script src="<?php echo base_url();?>js/script.js"></script>
</body>
<script>
var slideout = new Slideout({
'panel': document.getElementById('panel'),
'menu': document.getElementById('menu'),
'padding': 190,
'tolerance': 70
});
// Toggle button
document.querySelector('.toggle-button').addEventListener('click', function() {
slideout.toggle();
});
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
{
slideout.disableTouch();
}
// auto close
slideout.on('open', function() {
$( "#panel" ).click(function() {
return false;
});
$( "#panel" ).click(function() {
slideout.close();
});
});
slideout.on('close', function() {
$( "#panel" ).unbind('click');
});
</script>
<script>
$('.gallery').wmuSlider();
</script>
<script>
$(function() {
$( "[data-role='navbar']" ).navbar();
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
// Update the contents of the toolbars
$( document ).on( "pagecontainershow", function() {
// Each of the four pages in this demo has a data-title attribute
// which value is equal to the text of the nav button
// For example, on first page: <div data-role="page" data-title="Info">
var current = $( ".ui-page-active" ).jqmData( "title" );
// Change the heading
$( "[data-role='header'] h1" ).text( current );
// Remove active class from nav buttons
$( "[data-role='navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
// Add active class to current nav button
$( "[data-role='navbar'] a" ).each(function() {
if ( $( this ).text() === current ) {
$( this ).addClass( "ui-btn-active" );
}
});
});
</script>
</html>
Please help me to solve this problem. I had already searched for a solution. But I couldn't find anything. I had been struggling with this problem for weeks.
Related
I'm trying to make Login form using codeigniter, but my HTML code for login form doesn't work. I'm still trying to learn Codeigniter and I can't get what's the problem, why the form doesn't load
This is my html code for login form inside views folder :
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
<?php
if (!empty($login_errors)) {
?><h1>We could not log you in</h1><br /><?php
} else {
?><h1>Login to Your Account</h1><br /><?php
}
?>
<form id="login" method="post" action="<?php echo base_url(); ?>login">
<input type="text" name="login_email" placeholder="Username" />
<input type="password" name="login_password" placeholder="Password" />
<input type="submit" name="login_submit" class="login loginmodal-submit" value="Login" />
</form>
<div class="login-help">
Register - Forgot Password
</div>
</div>
</div>
</div>
<?php
if (!empty($login_errors) || isset($display_login)) {
?>
<script type="text/javascript">
$('#login-modal').modal('show');
</script>
<?php
}
?>
And here is the code from controller where i pass login form :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index(){
$data['title']= 'My Blog';
$this->load->model('Structure_model');
$footer = $this->Structure_model->get_footer_details();
$data['login'] = $this->load->view('login_view', NULL, TRUE);
$this->load->view('header', $data);
$this->load->view('welcome_message');
$this->load->view('footer', $footer);
}
}
And also header who is inside views folder :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCKTYPE html>
<html lang="en">
<head>
<title><?php echo $title; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="<?php echo base_url(); ?>assets/jquery/jquery-3.5.0.min.js"></script>
<script src="<?php echo base_url(); ?>assets/Bootstrap/js/bootstrap.js"></script>
<body>
<nav class="navbar navbar-inverse navbar-expand-lg">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand " id="logo" href="<?php echo base_url(); ?>">MiceX</a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent" style="margin-left: 10% ;">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Vehicle Selection</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<?php
if ( isset($_SESSION['logged_in']) && $_SESSION['logged_in'] == true ) {
?>
<li><i class="fa fa-address-book"></i> Welcome <?php echo $_SESSION['first_name'] . " " . $_SESSION['last_name']; ?></li>
<li><i class="fa fa-address-book"></i> Account</li>
<?php
if ($_SESSION['access_level'] == 100) {
?><li><i class="fa fa-users"></i> Admin Account</li><?php
}
?>
<li><i class="fa fa-address-book-o"></i> Logout</li>
<?php
} else {
?>
<li><i class="fa fa-address-book"></i> Sign Up</li>
<li><i class="fa fa-address-book-o"></i> Login</li>
<?php
}
if ( isset($_SESSION['cart_total']) ) {
?><li><i class="fa fa-shopping-cart"></i> $<?php echo $_SESSION['cart_total']; ?></li><?php
}
?>
</ul>
</div>
</div>
</nav>
<?php echo $login; ?>
The Login form I pass it into header. When I load the page I can see the navbar and when I click to Login button nothing happends. I can't get why it doesn't show up the Login form.
There's no errors.
Any suggestions ?
Thanks in advance!
I am making a portal of games where different games are showing on index page.
There are two procedures of playing games:
When user opens the index page and clicks on any game, if he is not logged-in already, then login form is showing on play.php; when user logs in then game will start
When user opens the index page and if he/she is already logged-in then login form will not appear. He can directly play a game.
Issue is that when a game is running on play.php, after playing user clicks back button in browser to return to the index page. But browser is showing play.php first and user has to click back button again to see index.php
Is there any way when click on back button then directly show index.php not show play.php again
index.php
<?php
$i=0;
$Res_games=mysqli_query($con, "SELECT * from tbl_games where
category_id=".$Row_Cat['id']);
while($Row_games = mysqli_fetch_array($Res_games)){
$img = $Row_games['icon_large'];
$game_url = $Row_games['url'];
$game_name = $Row_games['title'];
$formid=$Row_Cat['prefix'].$i;
?>
<div class="productCarousel-slide">
<article class="card ">
<figure class="card-figure">
<form id="<?php echo $formid; ?>" method="post" action="play.php">
<input type="hidden" name="url" value="<?php echo $game_url; ?>">
</form>
<a href="#" onclick="document.forms['<?php echo $formid; ?>'].submit();" title="<?php echo $game_name1; ?>">
<img class="card-image" src="<?php echo $img; ?>" alt="<?php echo $game_name;?>" title="<?php echo $game_name;?>">
</a>
<figcaption class="card-figcaption">
<div class="card-figcaption-body">
<div class="card-buttons">
</div>
<div class="card-buttons card-buttons--alt">
</div>
</div>
</figcaption>
</figure>
<div class="card-body">
<h4 class="card-title" style="text-align: center !important;">
<?php echo $game_name;?>
</h4>
</div>
</article>
</div>
<?php
$i++;
}
?>
Play.php
<?php
include('assets/db_connect.php');
$url1 = urlencode($_REQUEST['url']);
header("Cache-Control: no cache");
session_cache_limiter("private_no_expire");
if(isset($_SESSION['loginid'])){
?>
<html>
<head>
<style>
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}}
</style>
</head>
<body>
<div class="resp-container">
<iframe class="resp-iframe" src="page1.php?url=<?php echo $url1;?>" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</body>
</html>
<?php } else { ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/images/blue_logo.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="assets/css/util.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<?php
if($_SESSION['loginid']!='' && !isset($_REQUEST['login'])){ ?>
<script>location.replace("index.php");</script>
<?php
}
if(isset($_POST['login'])){
$msisdn = $_REQUEST['msisdn'];
//Check Mobile No.
$chk_Zero= substr($msisdn, 0, 1);
$chk_92= substr($msisdn, 0, 3);
if ($chk_Zero==0){
$msisdn = substr($msisdn, 1);
$msisdn = '92'.$msisdn;
}
if($chk_92=='923'){
$msisdn = $msisdn;
}
$cdate = date("Y-m-d H:i:s");
$rows=0;
$SQL1="SELECT * FROM tbl_useraccount where msisdn='$msisdn' and status=1";
$result = mysqli_query($con,$SQL1);
$GetRows=mysqli_fetch_array($result);
if($GetRows['msisdn']==$msisdn)
{
$ID=$GetRows['id'];
//Store OTP
/* $otp= rand(1000,9999);
$OTP_Insert=mysqli_query($con,"Update tbl_usersotp set otp='$otp', modify_date='$cdate' where userid='$ID' and msisdn = '$msisdn' and sms_status=1");
$Message="Dear User,\n\nYour Verification Code is $otp. \n\nTelenor Games";
file_get_contents("http://115.186.146.246:13013/cgi-bin/sendsms?username=tester&password=foobar&to=".$msisdn."&text=".urlencode($Message));
*/
$_SESSION['loginid']=$ID;
$_SESSION['msisdn']=$msisdn;
//Login Attempt Information
$userid=$ID;
$localIP = getHostByName(getHostName());
$server_ip=$_SERVER['REMOTE_ADDR'];
$session_id = session_id(); $_SESSION['session_id'] = $session_id;
$CInsert=mysqli_query($con,"INSERT INTO tbl_login_attempt (userid, date_time, local_ip, server_ip, login_status, session_id) VALUES ('$userid', '$cdate', '$localIP', '$server_ip', '1', '$session_id')");
if(isset($_REQUEST['game_url'])){
?>
<form id="frm_url1" action="play.php" method="post">
<input type="hidden" name="url" value="<?php echo $_REQUEST['game_url'];?>" />
</form>
<script type="text/javascript">
document.getElementById("frm_url1").submit();
</script>
<?php } ?>
<?php }else{$message = "<font color='#bb0000'>Invalid Mobile Number. Please re-enter the details and login again.</font>";}
}
?>
<div class="limiter">
<div class="container-login100" style="background-color:#000000">
<!-- background-image: url('assets/images/bg-01.jpg'); -->
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form class="login100-form validate-form" action="play.php" method="post" enctype="multipart/form-data">
<?php echo $message; ?>
<input type="hidden" name="game_url" value="<?php echo urldecode($url1);?>" />
<span class="login100-form-title p-b-49">
<img class="logo-responsive" src="assets/images/logo-white.png"/>Login
</span>
<div class="wrap-input100 validate-input m-b-23" data-validate = "Mobile Number is required">
<span class="label-input100">Mobile Number</span>
<input class="input100 allownumericwithoutdecimal" type="text" name="msisdn" placeholder="03XX1234567">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" type="submit" name="login">
Login
</button>
</div>
</div>
<br><br><br>
<!--<div class="txt1 text-center p-t-54 p-b-20">
<span>
Or Login Using
</span>
</div>
<div class="flex-c-m">
<a href="#" class="login100-social-item bg1">
<i class="fa fa-facebook"></i>
</a>
</div>-->
<div class="flex-col-c p-t-155">
<span class="txt1 p-b-17">
Not registered?
</span>
<a href="register.php" class="txt2">
Register
</a>
</div>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<script src="assets/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="assets/vendor/animsition/js/animsition.min.js"></script>
<script src="assets/vendor/bootstrap/js/popper.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendor/select2/select2.min.js"></script>
<script src="assets/vendor/daterangepicker/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<script src="assets/vendor/countdowntime/countdowntime.js"></script>
<script src="assets/js/main.js"></script>
<script>
$(".allownumericwithoutdecimal").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
</script>
</body>
</html>
I'm trying to center a image on a joomla site I'm building. It's a logo that's been placed in the header. Here is a link to the site http://www.gothamtattoos.com/mmp_upgrade/index.php (logo.png at the top is one I'm talking about). I've tried a few different things but my attempts either didn't do anything or they messed with the display of the top menu. I read on here about setting margin to auto and position to relative, etc. but it didn't work or perhaps I'm adding it to the wrong place.
Here is the section of the index.php file that pertains to the logo. I'm not much a coder at all and only slightly know what I'm doing, so descriptive replies will be greatly appreciated. Thanks in advance for the help.
$logopath = $this->baseurl . '/templates/' . $this->template . '/images/logo.png';
$logo = $this->params->get('logo', $logopath);
$logoimage = $this->params->get('logoimage');
$sitetitle = $this->params->get('sitetitle');
$sitedescription = $this->params->get('sitedescription');
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/sfhover.js"></script>
</head>
<body>
<div id="wrapper">
<!-- TopNav -->
<?php if($this->countModules('position-13')): ?>
<div id="topnav_wrap">
<div id="topnav">
<jdoc:include type="modules" name="position-13" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div id="header_wrap">
<div id="header">
<!-- Logo -->
<div id="logo">
<?php if ($logo && $logoimage == 1): ?>
<img src="<?php echo htmlspecialchars($logo); ?>" alt="<?php echo $sitename; ?>" />
<?php endif; ?>
<?php if (!$logo || $logoimage == 0): ?>
<?php if ($sitetitle): ?>
<?php echo htmlspecialchars($sitetitle); ?><br/>
<?php endif; ?>
<?php if ($sitedescription): ?>
<div class="sitedescription"><?php echo htmlspecialchars($sitedescription); ?></div>
<?php endif; ?>
<?php endif; ?>
</div>
<!-- Topmenu -->
<div id="topmenu">
<jdoc:include type="modules" name="position-1" />
</div>
</div>
</div>
Here is the css
http://www.gothamtattoos.com/mmp_upgrade/templates/jaxstorm-black/css/template.css
To centre the image, you only need to adjust some CSS.
#logo {
float:none;
}
#logo img {
display:block;
margin:0 auto;
}
You Set your Logo as a Background, Try to set it as a img
<div id="leftcol">
<div class="leftpadding">
<div class="logo_container">
<h1 class="logo"> <a href="/index.php" title="">
<span>
<img src="your_logo_url" alt="logo" />
</span>
</a> </h1>
</div>
<div class="moduletable">
</div>
</div>
I got problem error after minify my code, in developer tools it's notice Uncaught TypeError: $.totalStorage is not a function line = view = $.totalStorage('display');.
The function for change display product from list to grid. and there are 2 page (search and product) using this function.
As well i know the function is fine (because i not touch it), the problem is the library.
This the function js :
function display(view) {
if (view == 'list') {
$('.product-grid').attr('class', 'product-list');
$('.product-list > div').each(function(index, element) {
html = '<div class="right">';
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
//html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';
html += '<div class="left">';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="description">' + $(element).find('.description').html() + '</div>';
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}
html += '</div>';
$(element).html(html);
});
$('.display').html('<b><?php echo $text_display; ?></b> <span
class="showlist"><span class="glyphicon glyphicon-list"></span></span> | <span class="showgrid"><a onclick="display(\'grid\');"><span class="glyphicon glyphicon-th"> </span></a></span>');
$.totalStorage('display', 'list');
} else {
$('.product-list').attr('class', 'product-grid');
$('.product-grid > div').each(function(index, element) {
html = '';
var image = $(element).find('.image').html();
if (image != null) {
html += '<div class="image">' + image + '</div>';
}
html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="description">' + $(element).find('.description').html() + '</div>';
var price = $(element).find('.price').html();
if (price != null) {
html += '<div class="price">' + price + '</div>';
}
var rating = $(element).find('.rating').html();
if (rating != null) {
html += '<div class="rating" align=center>' + rating + '</div>';
}
html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
//html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
$(element).html(html);
});
$('.display').html('<b><?php echo $text_display; ?></b> <span class="showlist"><a onclick="display(\'list\');"><span class="glyphicon glyphicon glyphicon-th-list"> </span><?php /*echo $text_list; */?></a></span> | <span class="showgrid"><span class="glyphicon glyphicon-th"> </span> <?php /* echo $text_grid; */ ?></span>');
$.totalStorage('display', 'grid');
}
}
view = $.totalStorage('display');
if (view) {
display(view);
} else {
display('list');
}
I using opencart version 1.5.5.1
This is header : (where library call) js in bottom
<!DOCTYPE html>
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="google-site-verification" content="" />
<title><?php echo $title; ?></title>
<meta name="alexaVerifyID" content="" />
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php }else{?>
<meta name="description" content="" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php }else{?>
<meta name="keywords" content="">
<?php } ?>
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<!-- =================== Stylesheet =================== -->
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/combine-style.min.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/style.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/responsive.css" />
<!-- COMBINE = combine-style.min.css
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/mobile-style.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/jquery-ui-1.10.4.custom.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/owl.carousel.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/owl.theme.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/owl.transitions.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/slicknav.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/popup.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/stylesheet/responsive.css" />
-->
<?php foreach ($styles as $style) { ?>
<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<!-- =================== Javascript =================== -->
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.9.1.min.js"></script>
<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?>
<?php if ($stores) { ?>
<script type="text/javascript" defer="defer">
$(document).ready(function() {
<?php foreach ($stores as $store) { ?>
$('body').prepend('<iframe src="<?php echo $store; ?>" style="display: none;"></iframe>');
<?php } ?>
});
</script>
<?php } ?>
<!-- Facebook Pixel Code -->
<script type="text/javascript" defer="defer">
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '916337951821710');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=916337951821710&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<?php echo $google_analytics; ?>
</head>
<body id="top">
<!--<span class="visible-xs">SIZE XS</span><span class="visible-sm">SIZE SM</span><span class="visible-md">SIZE MD</span><span class="visible-lg">SIZE LG</span>-->
<!--facebook widget -->
<div id="fb-root"></div>
<script type="text/javascript" defer="defer">
setTimeout( function () {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.defer=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}, 3000);
</script>
<!-- end fb widget code -->
<!-- top notification -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="topbarinfo col-xs-12 col-sm-12 col-md-8 col-lg-8"><i class="fa fa-phone textorangeBK iconsize16"></i> Hubungi Kami : 021 - 6124788 <i class="fa fa-map-marker textorangeBK iconsize16"></i> <i class="fa fa-envelope textorangeBK iconsize16"></i> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="top-links">My Account | Checkout | Konfirmasi Pembayaran</div>
</div>
</div>
</div>
</div>
<div class="body-wrap">
<!-- start logo -->
<div id="header" class="logo-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<?php if ($logo) { ?>
<div id="logo"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></div>
<?php } ?>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="search-wrap">
<div class="rowx">
<div id="search" class="col-xs-12 col-sm-8 col-md-8 col-lg-8 search-input-wrap">
<div class="button-search">Search</div>
<input class="inputsearch" type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 cart-wraper">
<div> <?php echo $cart; ?> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- start menu -->
<?php if ($categories) { ?>
<div class="menu-wrap">
<div class="container">
<div class="row">
<div id="menu" class="col-md-12 menu-inner menu-nav">
<ul class="nav-effect">
<li>Home</li>
<?php foreach ($categories as $category) { ?>
<li><?php echo $category['name']; ?>
<!-- 060115 --><a class="drop"><i class="fa fa-caret-right"></i></a>
<?php if ($category['children']) {
$count_cat_chld = count($category['children']);
?>
<!-- 060115 --><div class="sub-menu">
<?php for ($i = 0; $i < $count_cat_chld;) { ?>
<ul>
<?php $j = $i + ceil($count_cat_chld / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><?php echo $category['children'][$i]['name']; ?></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<!--hide.js-->
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
<?php } ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/combine-min2.js" defer="defer"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/script.js"></script>
<!--
COMBINE = combine-min2.js
<script src="catalog/view/javascript/jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="catalog/view/javascript/jquery/bootstrap.min.js"></script>
<script src="catalog/view/javascript/jquery/jquery-ui-1.10.4.custom.min.js"></script>
<script src="catalog/view/javascript/jquery/jquery-ui-tabs-rotate.js"></script>
<script src="catalog/view/javascript/jquery/jquery.easing.js"></script>
<script src="catalog/view/javascript/jquery/owl.carousel.js"></script>
<script src="catalog/view/javascript/jquery/jquery.slicknav.min.js"></script>
<script src="catalog/view/javascript/jquery/bootstrap-transition.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/external/jquery.cookie.js"></script>
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<script type="text/javascript" src="catalog/view/theme/default/popup.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/hide.js"></script>
-->
<div id="notification"></div>
(Error only in product, search is fine)
if i put jquery.1.9.1.min.js in bottom the search will be error (notice is same).
I not good in jquery so i already try restore (before combine/minify) or change the line, but result it's still same.
Does anyone have any ideas for fix this?
can please any one tell me how i can create a loading on my site and let page to load all pictures and then start to showing the site ?
is it possible to write this codes with java query and css3 or i need to learn some thing else ?
Here is my HTML code . thanks every one .
<?php
/**
*#copyright Copyright (C) 2008 - 2009 . All rights reserved.
* #license
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" type="text/css" />
<?php if($this->direction == 'rtl') : ?>
<link href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php endif; ?>
<link id="JTKLocalCss" href="css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).on("click","#menu-oc",function() {
jQuery("#menu-drop").slideToggle("slow");
});
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0) {
jQuery("#header").addClass("fixed");
jQuery("#header").addClass("goblack");
} else {
jQuery("#header").removeClass("fixed");
jQuery("#header").removeClass("goblack");
}
});
jQuery("#introcenter").animate({width: "0"},600,function (){
jQuery(".intro").animate({height : "0"},600,function () {
jQuery("#main").animate({opacity : "1"},500);
});
});
});
</script>
<style>
</style>
</head>
<body>
<div id="main">
<div id="header">
<button id="menu-oc">HELLO</button>
</div>
<div id="menu-drop">
<div id="menu">
<jdoc:include type="modules" name="menu" style="html" />
</div>
</div>
<div id="index">
<div id="top">
<jdoc:include type="modules" name="top" style="html" />
</div>
<div id="top2">
<jdoc:include type="modules" name="top2" style="html" />
</div>
<div id="center">
<jdoc:include type="modules" name="center" style="html" />
</div>
<div id="contents">
<jdoc:include type="component" />
</div>
<div id="bottom">
<jdoc:include type="modules" name="bottom" style="html" />
</div>
<div id="bottom2">
<jdoc:include type="modules" name="bottom2" style="html" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="html" />
</div>
</div>
</div>
<div id="introcont">
<div id="introtop" class="intro"></div>
<div id="introcenter"></div>
<div id="introdown" class="intro"></div>
</div>
</body>
</html>
Yes you can, just add a div or loading image just after body tag so it will be loaded first, then at the end of your html, or before body end tag, or much better on window.onload put javascript function to remove the image.
Here look at this tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/