I want to increase the number of articles in the slider - javascript

I need some help in adding more articles to the Slider. Knowing that the number currently 3 articles. I needed to increase the number to 5 articles.
and this code in file slider.blade
<section class="mainslider commonslider">
<div id="imgslider" class="owl-carousel">
#foreach($sliderNews as $sn)
<div class="item">
<div class="sliderimg" style="background-image:url({{asset($sn->image)}});"></div>
<div class="slidertexts">
<div class="container">
<span >{{$sn->category->name}}</span>
<h1>{{$sn->title}}</h1>
<p>{!! str_limit( strip_tags($sn->article_html),100,'...') !!} </p>
شاهد
</div>//
</div>
</div>
#endforeach
</div>

i think from your controller you need to write a query and limit it to 5
$data['posts']=DB::table('posts')->limit(5)->get();
you can as well write an admin script to control the increment and decrement of the number of articles to be displayed any time.

Just changing this line
#foreach($articles->take(20)->random(3) as $sButtom)
To
#foreach($articles->take(20)->random(5) as $sButtom)

Related

How can I select an Animatedmodal to display different demos using one ID

I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.

Check if in "mode" visible-print or hidden-print in Angular

I have code like
<div class="row">
<div class="col-sm-12 visible-print">
Stuff (print in full width)
</div>
<div class="col-sm-6 hidden-print">
Stuff (same as above but only half width for screen)
</div>
<div class="col-sm-6 hidden-print">
Other stuff (I don't want to print)
</div>
</div>
What I am looking for is a function that returns true if visible-print and false if hidden-print so I can write. The code in the example is to be considered as Pseudocode
<div class="row">
<div class="{{inPrintMode() ? 'col-sm-12' : 'col-sm-6'}}">
Stuff (full width for paper, half for screen)
</div>
<div class="col-sm-6 hidden-print">
Other stuff (i don't want to print)
</div>
</div>
Does this kind of function exist?
I use bootstrap and Angular
Clarification:
I what to style the page in one way for screen/monitor/display and another way when the page is printed on paper. I use class="visible-print" for elements that only should appear on paper, and class="hidden-print" for elements that only should appear on the screen. Elements without these tags appear on both paper and screen.
What I am looking for how to write a function, I have called 'inPrintMode()' in this example, that detects if the user is viewing the page om a screen or if it is being rendered to be printed and returns a boolean.
visible-print and hidden-print is talked about here:
Hide a div in a page and make it visible only on print bootstrap 3 MVC 5
Thanks in advance for any help.
[ngClass] is suitable in your case
<div class="row">
<div [ngClass]="inPrintMode() == true ? 'col-sm-12' : 'col-sm-6'">
Stuff (full width for paper, half for screen)
</div>
<div [ngClass]="col-sm-6 hidden-print">
Other stuff (i don't want to print)
</div>
</div>
Sure there's [ngClass] and you can use it like this:
<div class="row">
<div [ngClass]="inPrintMode() ? 'class-a' : 'class-b'">
Stuff (full width for paper, half for screen)
</div>
<div class="col-sm-6 hidden-print">
Other stuff (i don't want to print)
</div>
</div>
Here's a Working Sample StackBlitz for your ref.

Bootstrap: move div from one column to another, order counts for mobile devices

<div class="row">
<div class="col-lg-7">
<div>block1 with IDs and classes</div>
<div>block2 with IDs and classes</div>
</div>
<div class="col-lg-5">
<div>block3 with IDs and classes</div>
</div>
</div>
How to make it look like
block1
block3
block2
for mobile?
P.S. Of course I took a look at this questions before I asked mine:
SO: How do I change Bootstrap 3 column order on mobile layout?
It doesn't help.
Also, adding hidden-xs and visible-xs for two blocks of
<div>block2 with IDs and classes</div>
in different places doesn't help as IDs should be unique on the page.
Any suggestions? Thank you.
Example:
IMPORTANT: block 3 may be (and it is) taller (the height is bigger) than block1.
No need to use push/pull. Just think "mobile-first"..
<div class="row">
<div class="col-lg-7">
<div>block1</div>
</div>
<div class="col-lg-5">
<div>block3</div>
</div>
<div class="col-lg-7">
<div>block2</div>
</div>
</div>
http://www.codeply.com/go/jgvSJrMOnk
In the case where block 3 is taller than the other columns, create a special class to float it to the right on large screens..
#media (min-width:1200px) {
.pull-lg-right {
float:right;
}
}
Related:How do I change Bootstrap 3 div column order
Bootstrap with different order on mobile version (Bootstrap 4)
using push and pull properties of grid will do your work try this the push and pull will be only applied for small device
<div class="row">
<div class="col-lg-3">block1 with IDs and classes</div>
<div class="col-lg-3 col-sm-push-12">block2 with IDs and classes</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-lg-6 col-sm-pull-12">block3 with IDs and classes</div>
</div>
Edit clearfix added for large device

Bootstrap grid alignment with Angular JS

I have been trying my hands with Bootstrap framework.
1.In the grid alignment when we have 4 columns to work with we use the below row as per w3 schools
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
</div>
or two columns we divide the same by col-lg-6 and col-lg-6. What if,if I have some 5 column that I want to align? What value should I set to col-lg-* in 3 coloumns?
Also, What if, if I have a json file where I get the data from and I create columns run time? How do I handle that scenario here? For example I use Angular js to get the data and generate some list like the one in the example below,
<section class="row">
<ul>
<li class="col-lg-6">
<img class="profile-image img-circle av" width="70%" src="images/Crack.png" />
<p>Some text</p>
</li>
<li class="col-lg-6">
<img class="profile-image img-circle av" width="70%" src="images/Aad.png" />
<p>Some text</p>
</li>
<li class="col-lg-6">
<img class="profile-image img-circle av" width="70%" src="images/Aa.png" />
<p>Some text</p>
</li>
</ul>
</section>
How do you think i can use ng-repeat and segregate the columns accordingly? I really hope I am clear in my question. Please help.
As for your first question, there are a handful of solutions - check out this SO question for details, Five equal columns in twitter bootstrap
For the second part, I might try something like this :
<div class="row" ng-repeat="item in placeholders">
<div ng-class="col-md-{{12 / placeholders.length | parseInt}}">col-md- {{12 / placeholders.length | parseInt}}</div>
</div>
Placeholders would be you JSON - so it just looks at the length and then runs a simple parseInt filter over it. This is all happening in an ng-class. The filter looks like so -
myApp.filter('parseInt', function () {
return function (a, b) {
return (parseInt(a))
}
});
A fiddle - http://jsfiddle.net/780gku24/
It's important to note though - this is assuming you aren't going to have more than 12 items in the JSON. If this does not work for you leave me a comment!
You can add or remove an item to the data to see it in action.
Please try col-lg-4. it would divide columns equally.

Angular ng-click ordering

New to Angular, so far loving it. I've come so far in creating a list of thumbnails. I've added 3 sort buttons order the thumbnails by 3 different data values. All works great but to make it a little more less confusing for the user I would like to reset/turn of ordering for one data set when another order button is clicked. EG - https://jsfiddle.net/5wayfc4z/
From the fiddle you will notice when you click on country its becomes orederd by "country" when you then click on "a-z" it will sort the data by attraction but the "country" sorting will be still showing - to turn this off I need to click on country again. I only want to sort one field one at a time if that makes sense?
<div id="buttons" class="row">
<div class="col-sm-6 col-md-4">
a-z
</div>
<div class="col-sm-6 col-md-4">
Country/State
</div>
<div class="col-sm-6 col-md-4">
type of attraction
</div>
</div>
<article>
<div class="row">
<div ng-repeat="selfieObj in sticks | filter:searchAttraction | orderBy:predicate:reverse">
<div class="col-xs-12" ng-show="newGrouping($parent.sticks, 'country', $index);">
<h2 ng-show="villa">{{selfieObj.country}}</h2>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img ng-src="{{selfieObj.mainImage}}" alt="{{selfieObj.attraction}}" title="{{selfieObj.attraction}}">
<div class="caption">
<h3>{{selfieObj.attraction}}</h3>
<p class="text-center">
{{selfieObj.answer}} {{selfieObj.info}}
</p>
</div>
</div>
</div>
</div>
</div>
</article>
EDIT:
https://jsfiddle.net/5wayfc4z/ new fiddle to take away the styling so it does not confuse.
To see my issue click on "country/state" - you will see the filter work by sorting by country and adding the country name. Then click on "a-z" this works BUT you will notice the filter for "country/state" is still in effect - in order to remove the "country/state" you have to click that filter button again.
The sorting seems to work fine in your fiddle, so is this just a visual issue?
Just remove the initial states from the buttons:
class="btn btn-primary btn-block"
instead of adding active or inactive by default.
I have forked your fiddle with the fix: fiddle

Categories