Problem is that I have NEWS-FEED module, in which I have taken data from server in which all title of news will be displayed on left div and after clicking on that news title , description regarding the news will be displayed on right div, in the code below, it simply shows data but don't know how to add image of that news.
CODE:
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle">
<div style=" width:25%;">
<b ng-click="$index" style="text-decoration: none;">
<a href="#" ng-click="textshow(showDiv = ! showDiv)" style="text-decoration: none;"># {{x.title}}
</a>
<hr>
</a>
</b>
</div>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">{{x.text}} </div>
</div>
</div>
Related
There are two parameters: date_begin (Date added) and date_end (Date delete). And I have a list where all users are displayed. And opposite each user there is an icon of a tick and a cross. These icons should vary depending on the parameters. Those. If only the parameter date_begin is filled, then the icon is displayed as a checkmark. Well, if both the date_begin and date_end parameters are filled in then the icon is displayed as a cross. The problem is that at the moment I have a cross icon opposite each user, although not all users have this option. How can this be remedied?
<div class="list-group" >
<div class="media" *ngFor="let user of users">
<a class="list-group-item ">
<h4 class=" media-heading list-group-item-heading"> {{user.full_name}} </h4>
<div class="row">
<div class="col-md-9">
<p class="list-group-item-text">{{user.position}}</p>
</div>
<div class="col-md-3">
<div class="media-left ">
<a *ngIf="(user.date_end$)">
<img class="media-object" src="assets/img/icon/checked.png" title="Uploaded">
</a>
<a *ngIf="!(user.date_end$)">
<img class="media-object" src="assets/img/icon/unchecked.png" title="Removed">
</a>
</div>
</div>
</div>
</a>
</div>
</div>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
i am working on news feed module . I have two div's ,in first div (left-side) list of all news title is displayed and on right side div the description and image about that title is shown.But i am not able to add vertical scroll bar on left-side div(title-div),if i apply div then it goes to every particular title only.and second one is when page is load the first title, description will automatically load, so how to do this two things?
Add a wrapper.
The overflow scroll goes to all tittle because the title class is inside ng-repeat and thus is repeated for every individual title.
Add another wrapper div outside ng-repeat and apply overflow scroll to that.
<div class="wrapper">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->
And add overflow:scroll to wrapper.
.wrapper {
overflow:scroll;
}
Note that this will create scroll for both title and text combined. Since they are in single wrapper. If you want different then, you will have to create two different wrappers with two different ng-repeat.
I have uploaded image in upload table using grids and MongoDB and I have stored image name in store table.
When I get store details first i have taken image name and check from upload table and displaying the image.
Here I am looping that image name its working but it always showing last image. I have enclosed my html and controller.
$http.get('***').success(function(data,dealers,response) {
var storelen=data.length;
console.log(storelen);
for(var i=0;i<storelen;i++) {
var storeimages=JSON.stringify(data[i].Store_Images);
var storeimages=(storeimages.replace(/\"/g, ""));
console.log(storeimages);
$http.get('***').success(function(data, status,response) {
$scope.image=data;
console.log($scope.image);
});
}
$scope.dealers = data;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-view >
<ion-content style="margin-top:50px;" ng-controller="ListingCtrl" data-ng-init="find()">
<div class="list card" data-ng-repeat="dealer in dealers | filter:query | filter:myFilter">
<div class="item item-thumbnail-left item-icon-right" href="#">
<img src="{{image}}" id="myimage">
<h2>{{dealer.Store_Name}}</h2>
<p>{{dealer.S_Address.city}} , {{dealer.S_Address.area}}</p>
<div class="row" style="padding:0px;">
<div class="col-90"><p style="font-size:10px">review</p></div>
<div class="col-10" style="margin-left:30px;">
<i style="right:0px;font-size:18px;color:#ff6f00;"class="icon ion-ios-location subdued"></i>
</div>
</div>
<div class="row" style="padding:0px;">
<div class="col" style="padding: 0px;"><p style="font-size:14px;" listing-rating rating-value="rating" max="5"></div>
</div>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" ng-href="tel:{{dealer.S_Phone.number}}">
<i class="icon ion-ios-telephone " ></i>
Contact Now
</a>
<a class="tab-item" style="color:green;">
<i class="icon ion-pricetags"></i>
Email
</a>
<a class="tab-item" style="color:#ff6f00;" >
<i class="icon ion-wand" ></i>
Check Now
</a>
</div>
</div>
</ion-content>
</ion-view >
In my table having 3 images, I am getting 3 images in console, but html I am always getting the last image.
I want to display image with in ng-repeat is there any other way doing it ?
on button click load <div class="popup">...<div> popup window. button have some value.. ex:(1658) popup details load from sql database on button value.. i cant do this.. plz help me..
Here is my codes on index.php
<ul id="products">
<li>
<div class="image"><img src="../someimage.jpg"><div>
<div class="name">Samsung 65' Curved LED 4K TV</div>
<div class="cart"><button type="button" onclick="" class="button blue">Add to Cart</button><div>
</li>
<li>
<div class="image"><img src="../someimage.jpg"><div>
<div class="name">Samsung Curved LED 4K TV</div>
<div class="cart"><button type="button" onclick="" class="button blue">Add to Cart</button><div>
</li>
</ul>
<div class="popup">
<div class="popup-image"><img src=""></div>
<div class="popup-name"></div>
<div class="popup-cart">
Close
View Cart
Buy Now
</div>
</div>
I am new to html and css,I have created a div that contains citynames.
I am trying to display that div on a button click.But when i click on button then that div gets hidden behind the next section of my page.
here is the image it looks like:
but i want to display that div over the section bellow that div and not behind. For getting more idea how i want ot display see askme.com and click on 'rest of india' dropdown button.
here is my html code:
<!--start SearchBox section-->
<section id="searchbox"style="background:white">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12">
<form style="">
<center>
<div id="SearchBoxBorder" style="background:white;border-style:soli;border-radius:5px;margin-top:20px;width:800px;">
<table id="mytable" >
<td style="width:300px;background:white;">
<center> <div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="I am looking for"
style="border-width:5px;background:white; margin-top:17px; margin-left:15px; margin-right:10px;width:300px;
border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px; font-size:18px;">
</div></center>
</td>
<td style="width:50px ;text-align:right;background:white;"> <center><strong> in</strong></center> </td>
<td style="width:400px;background:white;">
<center>
<div class="input-group" style="position: relative;">
<input type="text" class="form-control" placeholder="in locality"
style="border-width:5px;background:white; margin-top:2px; margin-left:10px; margin-right:20px;width:;font-size:18px;
border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px;">
<div class="input-group-btn" >
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownBtn"
style="background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;
border-color:#eee;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;margin-top:2px;">Select<span class="caret"></span></button>
<!--City dropdown -->
<div class="SearchCities" id="dialog" title="Basic dialog" >
<div id="outer" style="">
<div id="innerLeft" style="">
<h5 >North India:</h5>
<ul class="city" type="none";>
<li><a>Delhi</a></li>
<li><a>Agra</a></li>
<li><a>Shrinagar</a></li>
<li><a>Noida</a></li>
<li><a>Himachal</a></li>
<li><a>Patna</a></li>
</ul>
</div>
<div id="innerRight" style="">
<a class="close">×</a>
<h5>West India:</h5>
<ul class="city" type="none";>
<li><a>Mumbai</a></li>
<li><a>Pune</a></li>
<li><a>Nashik</a></li>
<li><a>Kolhapur</a></li>
<li><a>Osmanabad</a></li>
<li><a>Ahamdabad</a></li>
</ul>
</div>
</div><!--/outer-->
</div><!--/SearchCities-->
</div><!-- /btn-group -->
<button type="button" class="btn btn-primary" style="margin-right:20px;"><i class="icon-search" style="font-size:20px"></i> Search</button>
</div><!-- /input-group -->
</center>
</td>
</table>
</center>
</form>
</div><!--/col-lg-12-->
</div><!--/row-->
</div><!--/end of container-->
</section>
<!--End of SearchBox section-->
and following is my css for displaying that div:
.SearchCities {
float: right;
position:absolute;
margin-top:3px;
top: 100%;
right:20px;
}
so please help me ,and suggest any solution to achive above mentioned. .
Thank u in advence.
I have added .searchCiries{z-index:1;} and here is my output:
I dont want the city names come out of the container div.So please suggest any correction
In css add a z-index value like say : z-index:100
You should put
z-index: 9990;
in your div's class. This CSS option will bring your div to the front (unless value of z-index of other elements is more than 9990, the maximum value is 9999).
http://www.w3schools.com/cssref/pr_pos_z-index.asp