I want to change the CSS class of every second element within an included partial. Here is a code example of the output I want:
<p class="rec"></p>
<p class="sent"></p>
<p class="rec"></p>
<p class="sent"></p>
This is what I tried it so far:
<?php $derp = (isset($derp) && $derp == 'rec') ? 'sent' : 'rec'; ?>
<p class='<?php echo $derp; ?>'>
//CONTENT
</p>
I need help to get this working. I don't want to use the nth-child selector or JavaScript to change the class.
//update:
#forelse($statuses as $status)
#include('statuses.partials.status')
#empty
<div class="notif blue">
<span>This user hasn't yet posted a status.</span>
<span class="icon icon-info-sign"></span>
</div>
#endforelse
The partial get looped like this.
You can use pure CSS for this, using the nth-child selector and the even and odd parameter. In your CSS file simply add:
p:nth-child(odd) {
// This is the odd element so 1, 3, 5, .. element
}
p:nth-child(even) {
// This is the even element so 2, 4, 6, .. element
}
It's working now. I had to keep the code outside of the included partial and not in the partial itself. This made the difference! Anyways, still appreciate the given help!
Related
I'm new at Laravel and I want to know what best practices are for that :
I have a bunch of item I got with my query. It returns me something like that :
[{"id_equipement":24,"id_typeequipement":5, "imgequipement":xxxx},
{"id_equipement":30,"id_typeequipement":8, "imgequipement":xxxx}]
I have now 15 div to fill (see image below). One div represents one type and I want to know how to check if my first record goes to my second div background image, my second record goes to my third div...
I don't really know how to split in order to check...
Here is my html code:
<div class="item-frame-vertical" id="item-hat">
<div class="item-inner-frame"
style="background-image: url({{ asset('images/item_display/headgear.png') }})"></div>
</div>
<div class="item-frame-vertical" id="item-necklace" data-target="lol">
<div class="item-inner-frame"
style="background-image: url({{ asset('images/item_display/amulet.png') }})"></div>
</div>
<div class="item-frame-vertical" id="item-chest">
<div class="item-inner-frame"
style="background-image: url({{ asset('images/item_display/breastplate.png') }})"></div>
</div>
How can I check :
If the first record is type "5", it belongs to my 8th div
I was intending to do 15 query and give my controller 15 array and check for each div if there is a single record but I'm not sure this is the best way to do it because I must make 15 queries...
The way I'm doing it, I feel that I have to go through my result 15 times with a foreach and then check the type like :
#foreach ($entries as $entry)
if($entry->type_equipement == 5)
{
$img = $entry->img_equipement;
}
else
{
$img = images/item_display/breastplate.png
}
#endforeach
<div class="item-inner-frame" style="background-image:
url({{ asset('$img') }})"></div>
</div>
EDIT :
To be more precise... If I have the :
record with 'id_typeequipement' 5 I must change the background of the div 'item-hat' by 'img_equipement' from my record
record with 'id_typeequipement' 7 I must change the background of the div 'item-chest' by 'img_equipement' from my record
and this, for 15 div
I would like to put another code of div in every 5th row. Something like:
#foreach ($vip_ads as $key=>$ad)
#if($key%30==0) {
<div></div>
}
#include('front.ad.ad_template.view')
#endforeach
#foreach ($ads as $key=>$ad)
#if($key%30==0) {
<div></div>
}
#include('front.ad.ad_template.view')
#endforeach
My laravel version is 4. So I can't use new loop->iteration function. The problem is that it doesn't give a new block to a div. Everything in one line, meanwhile I need to close 5th row (6 columns total 30 elements) and put a new div, after that continue with the given $key value until it gets for example 60. And the next problem is that I could have less than 10 values in $vip_ads, but in total it has to be 30 for both $vip_ads and $ads. Sorry, for my english. Example of this can seen at http://zaza.iknobel.kz/catalog-ad/index/17
I use only laravel 5.x but your code is not bad, be carefull your key have to be numeric, or add $i=0; before with php and $i++ in the loop
#foreach ($vip_ads as $key=>$ad)
#if($key%5==0)
<div></div>
#endif
#include('front.ad.ad_template.view')
#endforeach
or
<?php $id=0;?>
#foreach ($vip_ads as $ad)
<?php $i++;?>
#if($i%5==0)
<div></div>
#endif
#include('front.ad.ad_template.view')
#endforeach
Edit :
Use something like bootstrap with col-md-3 for ad_template (A) and col-md-12 for div (-----) it will look like this :
A A A A
-------
A A A A
A bit of background: I'm trying to create user-editable pages in a blog-style web application. The application consists of multiple pages worth of content included into one page; dynamically generated from the back-end and laid out one under the other.
Note: I am a Laravel newbie.
The content of the pages is kept in the DB; one DB record = page title + content. I retrieve all records and send them to the template:
class ContentController extends Controller {
var $current_content;
public function __construct() {
$this->current_content = Content::all();
}
public function serveContent() {
return View::make('home')->with('pages', $this->current_content);
}
}
Over in the template I iterate through the object with the freshly retrieved data and display the contents for each page:
#foreach($pages as $page)
<section class="page">
<div class="editable-page" id="{{ $page->page }}">
{{ $page->content }}
</div>
<div hidden class="editable-page-edit-mode" id="{{ $page->page }}">
<textarea class="page-edit">
{{ $page->content }}
</textarea>
</div>
<input hidden type="button" class="edit-btn" value="Edit {{ $page->page }} section"/>
</section>
#endforeach
(The textarea is for the edit mode, it contains the same content as above; except this time it will be sent back to the DB).
The problem is that when outputting the variable contents with {{ $page->content }}, an absurd amount of whitespaces seem to be introduced.
Here's how the section looks in the browser: http://prntscr.com/bzeu4l
And here's what happens behind the scenes: http://prntscr.com/bzets2
Normally it would be completely and utterly irrelevant to me since the content is displayed properly. But when I unhide the textarea, it's clear that it receives the exact same data, with whitespaces: http://prntscr.com/bzeum8
This is a big problem because I don't want the DB values to be overwritten with spaces.
I could work around this by using regex and stripping what has more than 2 spaces when I save the data. But this feels like a workaround, not a solution.
Does anyone know an elegant solution to this? Since I'm a Laravel newbie, it's very possible that I'm missing something obvious about displaying variable values in Blade.
Thanks in advance.
PS: If anybody has any suggestions about my approach / if my approach with the textarea is flawed, I warmly welcome criticism.
Also, I am terribly sorry for the vague layout of the page, it's still in a very incipient stage. In case it's not evident, 'testhomecontent' and 'testservices' are practically $page[0]->content and $page[1]->content.
In blade when all spaces between the contents are preserved. So, to get rid of spaces change your following code
<div hidden class="editable-page-edit-mode" id="{{ $page->page }}">
<textarea class="page-edit">
{{ $page->content }}
</textarea>
</div>
To this:
<textarea class="page-edit">{{ $page->content }}</textarea>
Change
<textarea class="page-edit">
{{ $page->content }}
</textarea>
To
<textarea class="page-edit">{{ $page->content }}</textarea>
i can't get this to work in smarty template (.tpl), although it works fine when using plain html. When user selects from dropdown, the image gets replaced. What is happening in template is the replaced image shows blank, which suggests it can't find the src.
{literal}
<script>
function displayResult(selTag)
{
var x=selTag.options[selTag.selectedIndex].text;
alert("You selected: " + x);
document.getElementById('temp_image').src='images/'+ x +'.jpg';
}
</script>
{/literal}
<div class="configoptions">
{foreach from=$configurableoptions item=configoption}
{if $configoption.optiontype eq 1}
<select name="configoption[{$configoption.id}]" id="configoption[{$configoption.id}]" onchange="displayResult(this); recalctotals();">
{foreach key=num2 item=options from=$configoption.options}
<option value="{$options.id}"{if $configoption.selectedvalue eq $options.id} selected="selected"{/if}>{$options.name}</option>
{/foreach}
</select>
<br />
<img id="temp_image" src="images/templates/{$options.name}.jpg">
you've defined {$options} inside a foreach loop containing the elements from {$configoption.options} which itself contains items from {$configurableoptions}. Unfortunately this definition is out of scope since its outside the foreach-loop:
<img id="temp_image" src="images/templates/{$options.name}.jpg">
To (by default) display the first element of {$options} you could try something like this:
<img id="temp_image" src="images/templates/{$configurableoptions[0].options[0].name}.jpg">
I was playing with angular.js the other day and I found this filter function, that angular.js provides for us.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
My question is: Can I use angular.js filter on premade html elements, somehing like this.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones" ng-filter:query>
<li>First element</li>
<li>Second elementy/li>
<li>Third element</li>
</ul>
</div>
</div>
</div>
Thank you for your answers!
For this kind of DOM manipulation/filtering, Angular directives ngSwitch or ngShow/ngHide are normally used.
<ul class="phones" ng-switch on="query">
<li ng-switch-when="Nexus S">First element</li>
The above would look for an exact match though (so it is not as nice as #tosh's directive). ng-switch is often used with a select drop-down, where the possible values are fixed/known.
ngShow/ngHide are probably a better match for what you are trying to do. An in-line expression or $scope function can be used to determine whether to show an element:
<li ngShow="some expression using query">First element</li>
<li ngShow="myFilter()">First element</li>
function MyCtrl($scope) {
$scope.myFilter = function() {
if($scope.query ...) { // could use RegExp() here like #tosh
return true
}
return false
}
The above does not require jQuery.
No. Your first example uses a filter - called "filter"! A filter can form part of an Angular binding expression. It is placed after a pipe character, and applies a "filter function" to the part of the expression that came before the pipe. Some filters also take additional parameters, to the right of a colon. The filter called "filter" acts on an Array (the part before the pipe, in this case phones) passing each item through a check determined by the parameter to the right of the colon. In your case, using a string variable called query, it returns an Array with any items from phones that contain the string in query.
Other examples of filters in Angular include currency, date, uppercase and orderBy. They all take an input (for example a string) returning another value (for example the uppercase version of the string) and in some cases additional configuration parameters (such as a date or currency format, or field to order by). But they only work with an input that is some value in the "data model", not directly on the content of a DOM node.
Your second example attempts to use a directive called "ngFilter". A directive is an extension to standard HTML syntax, and can be expressed as hyphenated attributes (as in this case), data- attributes (data-ng-filter), namespaced attributes (ng:filter), css classes, etc. Angular's default directives have the prefix "ng". But there is no such directive as "ngFilter" in Angular. Your example will load fine, but there will be no effect on the DOM processing from adding this non-existent directive.
I do not think that is part of the default directive, but
that's interesting task.
I tried to implement with a custom directive. http://plnkr.co/edit/TOGbtq
app.directive('ngFilter', function() {
return {
link: function(scope, element, attr) {
scope.$watch(attr.ngFilter, function(q){
$(element).children().each(function(i,a){
$(a).toggle((new RegExp(q)).test($(a).text()));
});
});
}
};
});