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>
Related
my uploaded image are not showing on webpage.
<div class="col-md-8 news-item">
<a href="<?php echo base_url('home/newsdetail/'); ?><?php echo $newsdetail[0]['id']; ?>" style="text-decoration: none; color:black;" >
<h1><?php echo $newsdetail[0]['heading']; ?></h1>
</a>
<p class="author-name"><?php echo $newsdetail[0]['staffname']; ?> <span class="time"><i class="fa fa-clock-o"></i><?php echo date("d-m-Y H:i:s",strtotime($newsdetail[0]['created_date'])); ?></span></p>
<div class="read-img">
<?php if($newsdetail[0]['image']==''){ ?>
<img class="img-responsive" src="<?php echo base_url('assets/img/noimage.gif')?>" height="70"/>
<?php } else { ?>
<?php $multiimage=explode(",",$newsdetail[0]['image']); ?>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:480px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="//jssorcdn7.azureedge.net/theme/svg/loading/static-svg/spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
<?php foreach($multiimage as $imgrow){ ?>
<div>
<img data-u="image" src="<?php echo base_url('uploads/newsimages/'); ?><?php echo $imgrow; ?>" />
<img data-u="thumb" src="<?php echo base_url('uploads/newsimages/'); ?><?php echo $imgrow; ?>" />
</div>
<?php } ?>
</div>
First, try to print image path array. see if those are correct.
<?php
$multiimage=explode(",",$newsdetail[0]['image']);
print_r($multiimage);
?>
Then make sure those images are in the right directory.
Also for debugging purpos try printing the path if it's ok. you can check the image by simply putting the path on a browser URL.
<?php echo base_url('uploads/newsimages/').$imgrow ?>
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 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.
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/
I have a problem with a custom template, as after i add a product to the cart, no confirmation is displayed.In detail, after adding a product nothing happens and for example the cart information in the header stays empty. (See picture one)
http://de.tinypic.com/r/2hozei0/8
After clicking on the empty cart suddenly the product appears. (See picture two)
So its seems that the success message and the cart refresh is missing after adding a product.
http://i58.tinypic.com/20zcl6g.png
Figured it out that the needed handling appears in catalog/view/javascript/common.js
Functions like "addToWishList" or "addToCompare" are working but the "addToCart" is NOT working.
function addToCart(product_id, quantity) {
quantity = typeof(quantity) != 'undefined' ? quantity : 1;
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: 'product_id=' + product_id + '&quantity=' + quantity,
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, .information, .error').remove();
if (json['redirect']) {
location = json['redirect'];
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});}
Any help appreciated! I am using OC 1.5.6
Regards!
see my /template/common/header.tpl
<!DOCTYPE html>
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<head>
<meta charset="UTF-8" />
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?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 } ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $this->config->get('config_template');?>/stylesheet/stylesheet.css" />
<link href="catalog/view/theme/<?php echo $this->config->get('config_template');?>/stylesheet/cloud-zoom.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/<?php echo $this->config->get('config_template');?>/stylesheet/superfish.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/<?php echo $this->config->get('config_template');?>/stylesheet/slideshow.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/<?php echo $this->config->get('config_template');?>/stylesheet/jquery.prettyPhoto.css" rel="stylesheet" type="text/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 } ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/external/jquery.cookie.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.cycle.js"></script>
<link href="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/stylesheet/skin.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/colorbox/colorbox.css" media="screen" />
<link href='//fonts.googleapis.com/css?family=Krona+One' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4-iefix.js"></script>
<![endif]-->
<!--[if lt IE 8]><div style='clear:both;height:59px;padding:0 15px 0 15px;position:relative;z-index:10000;text-align:center;'><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></div><![endif]-->
<script type="text/javascript" src="catalog/view/javascript/jquery/tabs.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/easyTooltip.js"></script>
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jQuery.equalHeights.js"></script>
<script type="text/JavaScript" src="catalog/view/javascript/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jscript_zjquery.anythingslider.js"></script>
<script type="text/javascript" src="catalog/view/javascript/superfish.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/script.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/nivo-slider/jquery.nivo.slider.pack.js"></script>
<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?>
<!--[if IE 8]>
<style>
.success, #header #cart .content { border:1px solid #e7e7e7;}
</style>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $this->config->get('config_template');?>/stylesheet/ie7.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $this->config->get('config_template');?>/stylesheet/ie6.css" />
<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo img');
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $this->config->get('config_template');?>/stylesheet/livesearch.css"/>
<?php if ($stores) { ?>
<script type="text/javascript"><!--
$(document).ready(function() {
<?php foreach ($stores as $store) { ?>
$('body').prepend('<iframe src="<?php echo $store; ?>" style="display: none;"></iframe>');
<?php } ?>
});
//--></script>
<?php } ?>
<?php echo $google_analytics; ?>
</head>
<body class="<?php echo empty($this->request->get['route']) ? 'common-home' : str_replace('/', '-', $this->request->get['route']); ?>">
<div class="bg-1">
<div class="main-shining">
<div class="row-1">
<div id="header">
<div class="toprow">
<div class="outer1">
<?php echo $currency; ?>
<div id="welcome">
<?php if (!$logged) { ?>
<?php echo $text_welcome; ?>
<?php } else { ?>
<?php echo $text_logged; ?>
<?php } ?>
</div>
<div class="phone">
<?php echo $telephone; ?>
</div>
<?php echo $language; ?>
<div class="clear"></div>
</div>
</div>
<div class="outer1">
<?php if ($logo) { ?>
<div id="logo"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></div>
<?php } ?>
<div class="header-top1">
<div id="search">
<div class="button-search"></div>
<input type="text" name="search" placeholder="<?php echo $text_search; ?>" value="<?php echo $search; ?>" />
</div>
<div class="clear"></div>
<div class="cart-position">
<div class="cart-inner"><?php echo $cart; ?></div>
</div>
<div class="clear"></div>
<div class="topmenu">
<ul class="links">
<?php if (!isset($this->request->get['route'])) { $route='active'; } else {$route='';}?> <li class="first"><a class="<?php echo $route; if (isset($this->request->get['route']) && $this->request->get['route']=="common/home") {echo "active";} ?>" href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?>" href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a></li>
<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/account") {echo "active";} ?>" href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/cart") {echo "active";} ?>" href="<?php echo $shopping_cart; ?>"><?php echo $text_shopcart; ?></a></li>
<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="menu">
<script type="text/javascript">
$(document).ready(function(){
$('.menu ul li').last().addClass('last');
$('.menu ul li li').last().addClass('last');
});
</script>
<?php if ($categories) { ?>
<ul class="menu">
<?php $cv=0;?>
<?php foreach ($categories as $category) { $cv++; ?>
<?php if ($category['category_id'] == $category_id) { ?>
<li class="active cat_<?php echo $cv ?>">
<?php } else { ?>
<li class="cat_<?php echo $cv ?>">
<?php } ?>
<?php echo $category['name']; ?>
<?php if ($category['children']) { ?>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<?php $id=$category['children'][$i]['category_id'];?>
<?php if ( $id == $child_id) { ?>
<li class="active">
<?php } else { ?>
<li>
<?php } ?>
<?php if ($category['children'][$i]['children3']) {?>
<a class="screenshot1" href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name'];?></a>
<ul>
<?php foreach ($category['children'][$i]['children3'] as $ch3) { ?>
<li>
<?php if ($ch3['category_id'] == $ch3_id) { ?>
<?php echo $ch3['name']; ?>
<?php } else { ?>
<?php echo $ch3['name']; ?>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } else {?>
<a class="screenshot1" href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name'];?></a>
<?php }?>
</li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
<div class="clear"></div>
</div>
</div>
<?php if ($modules) {?>
<div class="header-modules">
<?php foreach ($modules as $module) { ?>
<?php echo $module; ?>
<?php } ?>
<div class="clear"></div>
</div>
<?php }?>
<div class="main-container">
<p id="back-top"> <span></span> </p>
<div id="container">
<div id="notification"> </div>
I think it should be ok, any clue why the functions $('.success').fadeIn('slow'); / $('#cart-total').html(json['total']); are not working?
I tried to change to the default template and the same problem appears, so maybe its no problem with the template?
You have to add , and this portion in the header template.