Opencart expand all checkout steps - javascript

Is there a way to expand all checkout steps in opencat? I want to put all 6 steps in just 2.
<div class="checkout">
<div id="checkout">
<div class="checkout-heading"><?php echo $text_checkout_option; ?></div>
<div class="checkout-content"></div>
</div>
<?php if (!$logged) { ?>
<div id="payment-address">
<div class="checkout-heading"><span><?php echo $text_checkout_account; ?></span></div>
<div class="checkout-content"></div>
</div>
<?php } else { ?>
<div id="payment-address">
<div class="checkout-heading"><span><?php echo $text_checkout_payment_address; ?></span></div>
<div class="checkout-content" style="display: block;"></div>
</div>
<?php } ?>
<?php if ($shipping_required) { ?>
<div id="shipping-address">
<div class="checkout-heading"><?php echo $text_checkout_shipping_address; ?></div>
<div class="checkout-content"></div>
</div>
<div id="shipping-method">
<div class="checkout-heading"><?php echo $text_checkout_shipping_method; ?></div>
<div class="checkout-content"></div>
</div>
<?php } ?>
<div id="payment-method">
<div class="checkout-heading"><?php echo $text_checkout_payment_method; ?></div>
<div class="checkout-content"></div>
</div>
<div id="confirm">
<div class="checkout-heading"><?php echo $text_checkout_confirm; ?></div>
<div class="checkout-content"></div>
</div>
The content is JavaScript generated or something so I can't just add display:"block" to the content divs.

Related

Dynamically split div columns

code i have written below is working fine but at the end of the looping the div is not closed its still opening a loop
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
$split++;
if ($split % 4 == 0){
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
</div>
The Div has splited very well but in end of the loop div has not been closed. Thats only the problem please provide me the help to sort out the problem
When I inspect the element the last loop will show at the given result as follows:
<div class="col-sm-3">
<div class="col-item">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/1557301934.jpg" alt="User one">
</div>
<div class="info">
<div class="name">UPHOLSTERY</div>
<div class="degination">UPHOLSTERY</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div></div><div class="item"><div class="row">
I want to remove the two opening div's as dynamically. How can i set this to remove opened div's at then end of the looping
You can do this:
<div class="carousel-inner">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="item <?php if($i==1) echo "active";?>">
<div class="row">
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>

Pagination without a table

is it possible to work in pagination if there are no tables or do I have to change my output style entirely.
<div class="row">
<?php if ($company != null): ?>
<?php foreach ($company as $row): ?>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="job-grid">
<div class="job-title-sec">
<div class="thumb"><?php echo $row['logo']; ?></div>
<div class="c-logo"> <img src="http://placehold.it/235x115" alt="" /> </div>
<div><h3><strong><?php echo $row['employerName']; ?></strong></h3></div>
<div><h3><strong>SECTOR: </strong><?php echo $row['sectorName']; ?></h3></div>
<div class="job-lctn"><i class="fa fa-map-marker"></i><?php echo $row['stateName']; ?></div>
</div>
<div class=""><i class="fa fa-external-link"></i>Website</div>
<div><i class="fa fa-external-link"></i>About</div>
</div><!-- JOB Grid -->
</div>
<?php endforeach; ?>
</ul>
<?php else: ?>
<?php if($this->session->flashdata('none') != null) {
echo '<div class="alert alert-danger">';
echo $this->session->flashdata('none');
echo '</div>';
} ?>
<?php endif; ?>
</div>
There are a large number of results for the foreach and I want to split it using pagination. Thanks

how to retrieve data from more than one table using session?

I am doing a dynamic site. My main page shows a persons profile on the left and the articles written by him on the right.This is my main page.When i click 'read more', that particular article should open up in a new page on the left, and the remaining articles written by the same person should be shown on the right.
But here all the articles are shown This is the image of my blog page. I only want the selected article to be shown on the left and all the remaining articles on the right.
This is my table for articles. In the first page i am calling the articles on the right using the person's id.
This is the code for my first page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from person_details where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="background-color:rgba(125, 178, 194, 0.43); margin-bottom:10px;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img style="margin:20px;" src="uploads/<?php echo $ar[17]; ?>">
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<h3><b>Mr. <?php echo $ar[1];?></b></h3>
<h5><?php echo $ar[8];?>, <?php echo $ar[12];?></h5>
<h5><?php echo $ar[2];?>, <?php echo $ar[7];?> years of experience</h5>
<p><?php echo $ar[16];?></p>
</div>
</div>
<div style="margin:20px;">
<h4><b>Services</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[18]; ?></h5>
</li>
</ul>
<h4><b>Specialisations</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[2]; ?></h5>
</li>
</ul>
<h4><b>Education</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[8]; ?> - <?php echo $ar[9]; ?> , <?php echo $ar[10]; ?> , <?php echo $ar[11];?></h5>
</li>
</ul>
<ul>
<li>
<h5><?php echo $ar[12]; ?> - <?php echo $ar[13]; ?> , <?php echo $ar[14]; ?> , <?php echo $ar[15];?></h5>
</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Articles by Mr. <?php echo $ar[1];?></h3><?php } ?>
<hr>
<?php
$sql1="select * from article_tb where id=$q";
$res1=mysql_query($sql1);
while($ar=mysql_fetch_array($res1))
{
$_SESSION['id'] = $q;
?>
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88">
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
<?php } ?></div>
</div>
</div>
and this is the code for my second page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from article_tb where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="border:1px solid #005212;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<center><img style="margin-top:10px;" src="uploads/<?php echo $ar[3]; ?>" /></center>
<div class="col-sm-12 col-md-12 col-lg-12">
<h4><b><?php echo $ar[1]; ?></b></h4>
<p><?php echo $ar[2]; ?></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88" />
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
</div></div></div>
<?php } ?>
Can somebody please help me?

Automatic reset when click another link

The Code Below is when you click a certain div. the hidden item will show up and change the css to display block. and i have multiple menu or option what im trying to do is when you click a certein div. and you click another one. the first one close automatically this is the indiciator <?php the_title(); ?> or id of the div.
Html
<a id="mylink" class="career-en blue" href="javascript:showhide('<?php the_title(); ?>')">
<div class="Career-entry" >
<div class="row" >
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'position' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'brandsubsidiary' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'work_location' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'date_posted' ); ?>
</div>
<div class="col-md-5ths col-sm-6 col-xs-12">
<?php the_field( 'aplication_dead_line_' ); ?>
</div>
</div>
</div>
</a>
<div class="career-content" id="<?php the_title(); ?>" style="display:none;">
<div class="row">
<div class="col-md-6">
<h6> <i> Position Summary: </i></h6>
<?php the_field( 'position_summary' ); ?>
</div>
<div class="col-md-6">
<h6> <i> Requirments: </i></h6>
<?php if( have_rows('requirments') ):?>
<?php while ( have_rows('requirments') ) : the_row(); ?>
<p class="reqs"> - <?php the_sub_field('para'); ?> </p>
<?php endwhile; else : ?>
<?php endif; ?>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h6> <i>Major Duties & Responsibilities: </i></h6>
<?php if( have_rows('major') ):?>
<?php while ( have_rows('major') ) : the_row(); ?>
<p class="reqs"> - <?php the_sub_field('para'); ?> </p>
<?php endwhile; else : ?>
<?php endif; ?>
</div>
<div class="col-md-6">
<h6> <i> Submit yoru resume: </i></h6>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 col-sm-12">
<?php echo do_shortcode( '[contact-form-7 id="112" title="Career"]' ); ?>
</div>
</div>
</div>
</div>
<hr class="career-hr">
<?php if ($x == 2) { echo '<div class="blog_box clear"></div>'; $x = -1; } $x++; ?>
<?php endwhile; ?>
</div>
Css
.red{
background-color: #e7f2ca;
display: block;
}
JS
<script>
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
<script>
$('a#mylink').click(function() {
$(this).toggleClass('red blue');
});
</script>
Add class ex. 'autohide' to all divs you want to autohide. Then:
$('.autohide').click(function(){
$('.autohide').hide();
$(this).show();
})
Just tweak your code a bit, just use a variable to keep track of currently open section.
var current_open_section;
function showhide(id){
//hide open section first
if(current_open_section){
current_open_section.style.display = 'none';
}
//let the selected section be current open section
current_open_section = document.getElementById(id);
//show current open section
current_open_section.style.display = 'block';
}

Safari gives huge white space in content?

My website looks good on every browser except Safari.
In Safari it shows a huge whitespace.
Here you can see the difference between Chrome and Safari.
This is Safari:
And this is Chrome:
<?php get_header();?>
<?php while (have_posts()): the_post();
$imgId = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($imgId, 'full'); ?>
<div class="theBiggest">
<?php if ($imgId) { ?>
<div style="background-image: url(<?php echo $image[0] ?>); background-repeat: no-repeat; background-size: cover; min-height: 346px;background-position:100% 60%; " >
<div class="text-center" style="padding-top: 130px;">
<img src="<?php echo THEME_URL ?>/images/logo_icon_white.png" /><br>
<div class="title-page"><?php the_title();?></div>
</div>
</div>
<div class="page-bg" >
<?php } else { ?>
<div class="container text-center bg-white" style="padding-top:50px; margin-bottom: 20px;">
<img class="top-icon" src="<?php echo get_field('top_icon')['url'] ?>" /><br>
<?php $title = get_the_title();
$ar = explode(' ', strtoupper($title)); ?>
<span class="title-page grey-txt"><?php echo $ar[0] ?></span>
<?php if (count($ar) > 1) {?><span class="title-page orange-txt"><?php echo $ar[1] ?></span><?php }?>
</div>
<!-- TRAININGEN page or Coaching page -->
<?php if (have_rows('ups_trainingen')): ?>
<div class="greyBlock">
<?php if(is_page('Leiderschaps training')) {
echo "<p>Hierom kiest u voor een <strong>training</strong> van InReach</p> ";
$ctn = "t";
}
if (is_page('Leiderschaps coaching')) {
echo "<p>Hierom kiest u voor <strong>coaching</strong> van InReach</p> ";
$ctn = "c";
} ?>
<?php $i=1;?>
<?php while (have_rows('ups_trainingen')): the_row();
$text = get_sub_field("text");
$link_popover = get_sub_field("link/popover");
?>
<button type="button" class="orangeBtn btn " id="<?php echo $ctn . $i;?>" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<?php echo $link_popover ?>"><?php echo $text; ?></button>
<?php $i++; ?>
<?php endwhile;?>
</div>
<?php endif;
} // else $imgId
while (have_rows('sections')) { the_row();?>
<div class="container page-section">
<div class="content" >
<?php the_sub_field('content')?>
</div>
</div>
<?php
}
// OVER page
if ($post->ID == 221) { ?>
<div style="display:none">
<div id="formpopup" class="registen_form" style="padding: 30px">
<!-- <h2 style="padding-top:25px"><?php echo _e('Alles uit uw medewerkers halen?', 'new_inreach') ?></h2> -->
<h2 style="padding-top:25px"><?php echo _e('Abonneer op deze gratis leiderschapstips', 'new_inreach') ?></h2>
<!-- <h2><?php echo _e('Ontdek gratis de 3 grootste missers die u niet moet maken.', 'new_inreach') ?></h2> -->
<?php gravity_form(7, false, false, false, '', true);?>
<!-- <h4><?php echo _e('En ontvang regelmatig gratis tips om uw leiderschap te versterken', 'new_inreach') ?></h4> -->
<h4></h4>
</div>
</div>
<div class="container page-section text-center">
<div style="margin-bottom: 30px;">
Ontvang leiderschapstips
Bekijk trainingsmogelijkheden
Plan een coachingssessie in
</div>
</div>
<?php } ?>
<?php if (have_rows('info_buttons')): ?>
<div class="info_button" >
<p style="color:#fff;">Kies uw snelheid</p>
<?php while (have_rows('info_buttons')): the_row();
$image = get_sub_field('image');
$link = get_sub_field('link');
?>
<div><img src="<?php echo $image['url']; ?>"></div>
<?php endwhile;?>
</div>
<?php endif;?>
<?php if ($post->post_content !== "") { ?>
<div class="container text-center bg-white test"><?php the_content();?></div>
<?php } ?>
</div><!-- page-bg -->
<?php if (have_rows('orange_&_grey_buttons')): ?>
<?php while (have_rows('orange_&_grey_buttons')): the_row();
$orangeBtnText = get_sub_field('orange_btn_text');
$orangeBtnlink = get_sub_field('orange_btn_link');
$greyBtnText = get_sub_field('grey_btn_text');
$greyBtnlink = get_sub_field('grey_btn_link');
?>
<?php
$footerText = get_field('footer_text');
if ($footerText) { ?>
<div class="page-footer" style="background-color: <?php the_field('footer_color');?>">
<div class="container"><?php echo $footerText ?></div>
</div>
<?php } ?>
<div class="orange-grey-btns" style="background-color:<?php the_field('footer_color');?>;padding:15px 0;">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 ">
<div class="col-md-12 orange-btn">
<?php echo $orangeBtnText; ?>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="col-md-12 grey-btn">
<i><?php echo $greyBtnText; ?></i>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;endif; //orange_&_grey_buttons?>
</div>
<?php endwhile; //have_posts?>
<?php get_footer();?>

Categories

Resources