Well, as the title says, I am not able to display the content in the tabs.
What I am doing is I am fetching the data from MySQL table and displaying it in tabs (successfully fetched).
What I am facing the problem is when the page is done with loading, I have to click one of the tabs in order to display all the contents of the tabs.
Here's the code for the tabs:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Description
</li>
<li>
Terms and Conditions
</li>
<li>
Returns and Cancellation
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="description">
<p class="lead text-justify" style="margin: 10px 5px;">
<?php echo $descrip; ?>
</p>
</div>
<div class="tab-pane" id="terms">
<p class="lead text-justify" style="margin: 10px 5px;">
<?php echo $termsAndCond; ?>
</p>
</div>
<div class="tab-pane" id="returns">
<p class="lead text-justify" style="margin: 10px 5px;">
<?php echo $returnsAndCan; ?>
</p>
</div>
</div>
</div>
The data is displayed once clicked on either of the tabs from the code above. I don't know where I have made the mistake. Kindly help me out in rectifying it.
Thank You in advance.
Next to setting the Description tab active which you did by setting <li class="active"> you also have to set the Description tabs content active. I think you forgot to do this.
Add the class active to the first tab-pane, so change it from <div class="tab-pane" id="description"> into <div class="tab-pane active" id="description">.
See http://getbootstrap.com/javascript/#tabs for more documentation about Bootstraps tab component.
Related
I´m making a site for myself and I´ve been stuck with this issue. The site has several categories, for example geometry -> triangles. When I'm scrolling through articles and do not have a filtered category on yet, everything is ok. But when I filter categories and choose a specific one, for example triangles, all other articles that do not concern triangles get hidden. But that's not the issue. The problem is, if the articles for triangles where on the page 3 while the filter was off and you could see all the articles all together, then even after the filter is on the chosen category will be left on the page 3 and won't move to the first page. How do I fix this?
bodyOfmainPage.php
<main class="index-main">
<section class="articles">
<div class="article_content container container--pall">
<h1 class="heading">მთავარი გვერდი</h1>
<div class="article_grid">
<?php $idM=get_size(); ?>// number of articles
<?php for($id=$idM;$id>0;$id--): ?>
<?php $idN= get_num_size($id);?>
<div class="article_item" href="#" data-id ="<?= intval(($idM - $id)/4 + 1) ?>" data-category="<?= get_data_category($id) ?>">
<div class="article_image" style="background-image: url('<?= get_img_url($id) ?>')"> </div>
<div class="article-text">
<div class="article_date"><?= get_article_date($id) ?></div>
<div class="article_title"><?= get_article_title($id) ?></div>
<div class="article_description"><?= get_article_description($id) ?></div>
<div class="hashtag"><?= get_hashtag($id) ?></div>
<div class="butt">
<a class="AB" href="<?= get_article_link($id) ?>">
<button type="button" class="clickA" >გადასვლა</button></a>
</div>
</div>
</div>
<?php endfor; ?>
</div>
</div>
</section>
<div class="num">
<ul class="contentNum">
<li class="navigation" data-id ="1">1</li>
<li class="navigation" data-id ="2">2</li>
<li class="navigation" data-id ="3">3</li>
<li class="navigation" data-id ="4">4</li>
<li class="navigation" data-id ="5">5</li>
</ul>
</div>
</main>
I have been working on a job-listing website during the last few weeks as a self taught CS student. I finished the front end of the website in July and now I am learning mySQL and PHP to produce the back-end.
So, on the current "job listing" page search.html, there is currently 4 listing in the page but I typed those directly on the html when I was making the front-end just to see how it will look like.
I have build my database like this and added few examples:
I also made a back-end page to let the user add a a new listing and it is working.
I am not sure it was a good idea to start with the front-end. I am now trying to display three columns (title, location, type) of eachrowbased on my specific front-end layout. I won't display thedate` yet since I have not created it on mySQL.
search.html
<div class="job-listing">
<div class="container">
<div class="job-number">
<h2>We Found <span id="number-jobs-total" class="text-secondary"></span> Offers For <span>You</span> </h2>
</div>
<ul class="job-board">
<li class="job job-1">
<div class="job-title">
<h2>Process Engineer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/19/2019</p>
</div>
<div class="job-industry">
<p>Engineering</p>
</div>
<ul class="job-keywords">
<li>Engineering</li>
<li>Science</li>
</ul>
</li>
<li class="job job-2">
<div class="job-title">
<h2>Chief Financial Officier</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-3">
<div class="job-title">
<h2>Assistant CEO</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-4">
<div class="job-title">
<h2>Front-End Developer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
</ul>
<nav class="pagination-container">
<ul class="pagination">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div>
</div>
Things I will do later:
I need to protect my PHP code against injections
The pagination button is not working
PHP contact form is sent and displays a confirmation message: I need the div with the white background to be full column. If I put margins on the message, it breaks layout as pictured. I'm still wrapping my head around how the PHP logic's structure in terms of interactions, not sure where exactly to tweak it and fix the issue.
My code is structured as such:
<div id="whitebox" class="whitebox">
<div class="text-center orange-navbar">
<nav role="navigation">
<ul class="navcen nav nav-pills" >
<li role="presentation">Home</li>
<li role="presentation">Portfolio</li>
<li class="active" role="presentation">Contact</li>
</ul>
</nav>
</div>
<?php if(!empty($emailSent)): ?>
<div class="col-md-6 col-md-offset-3">
<div class="alert alert-success text-center"><?php echo $config->get('messages.success'); ?></div>
</div>
<?php else: ?>
<?php if(!empty($hasError)): ?>
<div class="col-md-5 col-md-offset-4">
<div class="alert alert-danger text-center"><?php echo $config->get('messages.error'); ?></div>
</div>
<?php endif; ?>
Add this to your css:
.whitebox {
height: 100vh;
}
This will give your whitebox div a height of 100% of your viewport.
I recently inherited a website with a horrible file structure. I need to update some content (text) but I can’t find where it is being defined. The database table does not have the information, so I'm guessing the text is being defined elsewhere. Is there a tool or "trick" in Chrome Dev Tools to find the content source? Your help is much appreciated!
***Snippet from PHP File:
<div id="product_wrapper" class="add-bottom30">
<div class="columns sixteen">
<div class="columns twelve add-bottom60 catalogue">
<!-- Pager -->
<?php include('sql-' . $_SESSION['lang'] . '/promos.php');?>
</div>
<div class="columns four side">
<h5 style="margin-bottom:25px;">FLYERS</h5>
<ul>
<li style="background-color:#0065a4;">
<?php echo flyer_jet_2016; (where the text I need to change lives) ?>
</li>
</ul>
</div>
<div class="clear"><!-- ClearFix --></div>
</div>
</div>
*** Snippet from source code ("View Source" in Chrome):
<div class="columns four side">
<h5 style="margin-bottom:25px;">FLYERS</h5>
<ul>
<li style="background-color:#0065a4;">
<span class="icon" data-icon="(" style="color:#fff;margin-bottom:15px;"></span><br>Tool Storage<br>Solutions 2016
</li>
</ul>
</div>
<div class="clear"><!-- ClearFix --></div>
</div>
I have this open source project, written in php, and I am trying to modify the code. I added some tabs and I want to load a form when a tab is selected. The project is OpenEMR.
<?php
if($focustype=='allergy'){
?>
<div id="container">
<ul class="tabNav">
<li class="current">Medical Implants</li>
</ul>
<div class="tabContainer">
<div class="tab current">
<p><a id="cod2" onclick="return loadFrame2('cod2','RBot','patient_file/encounter/load_form.php?formname=LBFclinicalPD')" href="" style="color: rgb(0, 0, 0);">Patient Clinical Data</a><p>
</div>
</div>
</div>
<?php
The problem is that it doesn't work. It seems to be loading for a second and then nothing.
Thank you in advance
Try this:
<a id="cod2" onclick="loadFrame2('cod2','RBot','patient_file/encounter/load_form.php?formname=LBFclinicalPD');return false;" href="#" style="color: rgb(0, 0, 0);">Patient Clinical Data</a>