I'm editing a photography website with a portfolio with links at the top to filter by: View All, Fashion, Family, Weddings, etc.
I'd like to remove "View All" and make "Fashion" (the next list item) set as "active". I'm able to remove the "View All" label by taking it out of the php but it still doesn't set Fashion as active.
I'm using the Miami theme.
I'd appreciate any help!
HTML:
<div id="filters" class="fillter-wrap">
<ul>
<li>
<button class="but activbut active-fillter" data-filter="*">View All</button>
</li>
<li>
<button class="but" data-filter=".fltr-fashion">Fashion</button>
</li>
<li>
<button class="but" data-filter=".fltr-families-couples">Family</button>
</li>
</ul>
PHP:
// filter
if( $filter=='center' ){
$filter_html = "<div id='filters' class='fillter-wrap'>
<ul>
<li>
<button class='but active-fillter' data-filter='*'>View All</button>
</li>
$filter_html
</ul>
</div>";
}
else if( $filter=='toggle' ){
$filter_html = "<div id='filters' class='port5-filters fillter-wrap marg-lg-b15'>
<div class='clearfix show-filter'>
<div class='filter-button'>
<div class='w-embed'>
<i class='fa fa-filter'></i>
</div>
</div>
<div class='filter-effect'>
<span class='filter-txt'>Hide</span><span class='filter-txt-hide'>".esc_html__('Show', 'miami')."</span>
<span class='filter-static'>".esc_html__('Filter', 'miami')."</span>
</div>
</div>
<ul>
<li>
<button class='but active-fillter' data-filter='*'>".esc_html__('', 'miami')."</button>
</li>
$filter_html
</ul>
</div>";
}
else{
$filter_html = "";
}
return "<div class='main-categories n-marg-b30'>
<div class='row'>
$filter_html
<div class='izotope-container col-".abs($columns)." popup-gallery $space'>
<div class='grid-sizer'></div>
$items
</div>
</div>
</div>";
}
Would it be something like this...?
<div id="filters" class="fillter-wrap">
<ul>
<li>
<button class="but activbut active-fillter" data-filter=".fltr-fashion">Fashion</button>
</li>
<li>
<button class="but" data-filter=".fltr-families-couples">Family</button>
</li>
</ul>
Edit: Just realised I may have misunderstood the question. Can you tell us how $filter_html is created? I am not familiar with the miami theme.
Related
I am creating a module for Question and Answers and I need to fetch the data separatedly each.
I created a Tab where I'll click the Question I want to answers, and its children or the answer should match.
For visual reference, here is my problem
I have this data that are all fetched, which should not be. That is why I created Tabs and Pills so I can separate questions and answers
12 and 13 are the id number of each data
So in Tabs and Pills, I got this
The problem of this, is that I cannot fetch the data dynamically, it just shows ID 13 data for question and answer. How can I change this dynamically so I can click back and forth the tabs and show the right data by its id?
I need to fetch the ID 12 of the 1st Tab
So here is my view
<ul class="nav nav-tabs" role="tablist">
<?php foreach($questions as $question){ ?>
<?php echo $question->id; ?>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#<?php echo $question->id ?>" role="tab"><h4><?php echo $question->question ?></h4></a>
</li>
<?php } ?>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="13" role="tabpanel">
<div class="card" style="border:2px solid black;">
<div class="card-body">
<?php foreach($this->question_model->findAnswersByQuestion($question->id) as $answer){ ?>
<?php if($answer->type_id==0): ?>
<input type="radio" name="question_<?php echo $question->id; ?>" value="<?php echo $answer->answer ?>" required/>
<?php echo $answer->answer; ?><hr>
<?php endif; ?>
<?php if($answer->type_id==1): ?>
<div class="input-group input-group-lg">
<input type="text" class="form-control col-md-6" placeholder="Enter Answer" name="question_<?php echo $question->id; ?>" required/>
</div>
<?php endif; ?>
<?php } ?>
</div>
</div><br>
</div>
</div>
Fix the tabs structure, your looping over questions for nav-item, but not looping over for tab-pane which is why clicking the tab link does nothing.
<ul class="nav nav-tabs" role="tablist">
<?php foreach($questions as $question){ ?>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab-<?php echo $question->id ?>" role="tab"><h4><?php echo $question->question ?></h4></a>
</li>
<?php } ?>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<?php foreach($questions as $question){ ?>
<div class="tab-pane" id="tab-<?= $question->id ?>" role="tabpanel">
<div class="card" style="border:2px solid black;">
<div class="card-body">
<?php foreach($this->question_model->findAnswersByQuestion($question->id) as $answer){ ?>
<!-- form input $answer / item -->
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</div>
I need to show dynamic logo and site slogan from database. Both data are static define in views/includes/topbar.blade.php
view/includes/topbar.blade.php
<header>
<div class="container-fluid">
<!--top-->
<div id="top">
<div class="col-left">
<div class="africe"> Website Slogan </div>
<div class="call_us"> call us: <span>+xx-xxxxx</span> </div>
</div>
<div class="col-right">
<div class="top-right">
<ul>
<li>Follow Us:</li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li>
<button class="Enquire_now">ENQUIRE NOW</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
You can try view composers for sharing data to all views.
public function compose(View $view)
{
//get options model from database
$options = Model::where('foo', 'bar')->first();
//passing options to view
$view->with('options', $options);
}
in your view call them like,
<div class="col-left">
<div class="africe"> {{ $options->slogan }} </div>
</div>
This question has been asked before but i used the same thing as said in the answer to the question but it is not working
My form:
$home=
"<div class='heading' >
<p><b>EHD HOME AUTOMATION</b></p>
</div>
<div class='menu-wrap'>
<nav class='menu'>
<ul class='clearfix'>
<li><a href='./member.php'>$username's Home</a></li>
<li>
<a href='#'>States <span class='arrow'>▼</span></a>
<ul class='sub-menu'>
<li><a href='#' onclick='changeAllStatesToFalse();'>ALL APPLIANCES OFF</a></li>
<li><a href='#' onclick='changeAllStatesToTrue();'>ALL APPLIANCES ON</a></li>
<li><a href='#' onclick='getStates();'>GET STATES</a></li>
</ul>
</li>
<li><a href='#'>Security</a></li>
<li><a href='#'>Page info</a></li>
<li><a href='./logout.php'>Logout</a></li>
</ul>
</nav>
</div>
<!3 Toggle Buttons start>
<div class='buttonsArea'>
<div class='display'>
<label class='label toggle'>
Appliance 1
<input type='checkbox' class='toggle_input' id='button1' name='A1'/>
<div class='toggle-control'></div>
</label>
</div>
<div class='display'>
<label class='label toggle'>
Appliance 2
<input type='checkbox' class='toggle_input' id='button2' onclick='updateTable(2);'/>
<div class='toggle-control'></div>
</label>
</div>
<div class='display'>
<label class='label toggle'>
Appliance 3
<input type='checkbox' class='toggle_input' id='button3' onclick='updateTable(3);' />
<div class='toggle-control'></div>
</label>
</div>
</div>
<!3 Toggle Buttons end>";
if(isset($_POST['A1'])){
echo "<script type='text/javascript'>alert('A1 pressed');</script>";
}
if($username && $userid){
echo "$home";
if($errormsg)
echo "<script type='text/javascript'>alert('$errormsg');</script>";
}
The checkbox A1 is not responding to isset function. No matter set or not set nothing echo's.
Please help
See the 3 toggle button division
In an example category, the result products are listed using an unknown template. I have pagayo electronics theme as default.It uses a class called item-review and item-bottom for listing. they aren't in html code.
code is like this:
<ul class="products-grid">
<li class="item first">
<img src="http://magicfly.ir/media/catalog/product/cache/1/small_image/135x/9df78eab33525d08d6e5fb8d27136e95/1/3/13steps2.jpg" width="135" height="135" alt="13 Steps to Mentalism" />
<h2 class="product-name">13 Steps to Mentalism</h2>
<div class="ratings">
<span class="amount">1 نظر</span>
</div>
<div class="price-box">
<span class="regular-price" id="product-price-10">
<span class="price">30٬000 تومان</span> </span>
</div>
<div class="actions">
<p><button type="button" title="افزودن به سبد" class="button btn-cart" onclick="setLocationAjax('http://magicfly.ir/checkout/cart/add/uenc/aHR0cDovL21hZ2ljZmx5LmlyL21lbnRhbGlzbS5odG1s/product/10/form_key/Ql6smZ0IvKikUDgX/','10')"><span><span>افزودن به سبد</span></span></button></p>
<ul class="add-to-links">
<li>افزودن به لیست دلخواه</li>
<li><span class="separator">|</span> افزودن به مقایسه</li>
</ul>
while it should be like this (wrap with item-review and item-bottom classes):
<ul class="products-grid first odd">
<li class="item first">
<img src="http://demo.pagayo.com/media/catalog/product/cache/1/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/a/p/apple-tv-1.jpg" alt="Apple TV" height="210" width="210">
<div class="item-review">
</div>
<div class="item-bottom">
<h2 class="product-name">Apple TV</h2>
<div class="price-box">
<span class="regular-price" id="product-price-9">
<span class="price">$99.00</span> </span>
</div>
<div class="actions">
<button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('http://demo.pagayo.com/pagayotheme001/checkout/cart/add/uenc/aHR0cDovL2RlbW8ucGFnYXlvLmNvbS9wYWdheW90aGVtZTAwMS9hY2Nlc3Nvcmllcy5odG1s/product/9/')"><span><span>Add to Cart</span></span></button>
</div>
</div>
</li>
<li class="item">
<img src="http://demo.pagayo.com/media/catalog/product/cache/1/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg" alt="Bose SoundDock Portable Digital Music System" height="210" width="210">
<div class="item-review">
<div class="ratings">
<div class="rating-box">
<div class="rating" style="width:97%"></div>
</div>
<span class="amount">2 Review(s)</span>
</div>
</div>
<div class="item-bottom">
<h2 class="product-name">Bose SoundDock Portable Digital Music System</h2>
<div class="price-box">
<span class="regular-price" id="product-price-22">
<span class="price">$399.95</span> </span>
</div>
<div class="actions">
<button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('http://demo.pagayo.com/pagayotheme001/checkout/cart/add/uenc/aHR0cDovL2RlbW8ucGFnYXlvLmNvbS9wYWdheW90aGVtZTAwMS9hY2Nlc3Nvcmllcy5odG1s/product/22/')"><span><span>Add to Cart</span></span></button>
</div>
</div>
</li>
<li class="item last">
<img src="http://demo.pagayo.com/media/catalog/product/cache/1/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg" alt="Bose SoundLink Bluetooth Mobile speaker II" height="210" width="210">
<div class="item-review">
</div>
<div class="item-bottom">
<h2 class="product-name">Bose SoundLink Bluetooth Mobile speaker II</h2>
<div class="price-box">
<span class="regular-price" id="product-price-21">
<span class="price">$349.95</span> </span>
</div>
<div class="actions">
<button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('http://demo.pagayo.com/pagayotheme001/checkout/cart/add/uenc/aHR0cDovL2RlbW8ucGFnYXlvLmNvbS9wYWdheW90aGVtZTAwMS9hY2Nlc3Nvcmllcy5odG1s/product/21/')"><span><span>Add to Cart</span></span></button>
</div>
</div>
</li>
</ul>
in
/app/design/frontend/default/pagayo-theme-001/template/catalog/product/list.phtml
it is correctly wrapped but it seems it uses another theme that doesn't wrap it.
I didn't specify custom template for category or any product.
The amazing thing here is I checked list.phtml of base template and copied pagayo list.phtml to base. Just nothing happened.
I want it to use the default theme I specified in configuration Or at least find the phtml file of this piece of code to edit and make it correct.
without seeing its had to infer solution. possibilities are:
1) There can be an issue of improperly selected Magento Package.
system->configuration->Design->Package
2) If you want to see which template using on Template Path hints
system->configuration-> Developer -> Debug -> Template Path Hints select to on
clear cache and refresh the page.
I have a page with a list of Bootstrap collapsion panels. I create these panels dynamically by first querying the database for content, see the code below:
<div class="panel-group" id="accordion">
<?php
$all_emails = "SELECT * FROM sent_emails";
if($result = mysqli_query($link, $all_emails)) {
while($rows = $result->fetch_object()) {
$db = $rows->timestamp;
$timestamp = strtotime($db);
echo '
<div class="panel panel-default m'.date("m", $timestamp).'">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse'.$rows->ai.'">
#'.$rows->ai.' | Sent to: '.$rows->mail_to.' | Subject: '.$rows->mail_subject.' <span class="pull-right">| '.$rows->timestamp.' </span>
</a>
</h4>
</div>
<div id="collapse'.$rows->ai.'" class="panel-collapse collapse">
<div class="panel-body">
'.$rows->mail_message.'
</div>
</div>
</div>
';
}
mysqli_free_result($result);
}
?>
</div>
This works fine and all, but what I want to accomplish next is adding a filter that only show the panels with a certain class in it. As you can see in the code above I create divs with the classes "panel panel-default m('month') which all have a parent div called "panel-group".
WHen I choose a month from the dropdown button as shown below, I take the value/id of the month into jQuery as input for the filter.
<div class="dropdown1">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select month
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="select1">
<li value="january" id="m1" role="presentation">January</li>
<li value="february" id="m2" role="presentation">February</li>
<li value="march" id="m3" role="presentation">March</li>
<li value="april" id="m4" role="presentation">April</li>
<li value="may" id="m5" role="presentation">May</li>
<li value="june" id="m6" role="presentation">June</li>
<li value="july" id="m7" role="presentation">July</li>
<li value="august" id="m8" role="presentation">August</li>
<li value="september" id="m9" role="presentation">September</li>
<li value="october" id="m10" role="presentation">October</li>
<li value="november" id="m11" role="presentation">November</li>
<li value="december" id="m12" role="presentation">December</li>
</ul>
</div><!--/.dropdown1 -->
So far I have the following jQuery code. Every child div of "panel-group" that doesn't have the class let's say m10 (=October) must be hidden.
<script>
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group").show();
$(".panel-group .panel.panel-default :not(."+this.id+")").hide();
});
});
I have been trying a lot and have searched all over the internet for an answer that satisfies what I need, but no luck so far :(
Hide all, then show the correct one:
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group .panel").hide();
$(".panel-group .panel.panel-default."+this.id).show();
});
});