Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I've got a problem with .index() function in jQuery.
Outline of DOM:
<div class="one">
<div class="two">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
<div class="threeB"></div>
<div class="threeB"></div>
<div class="threeB"></div>
</div>
<div class="one">
<div class="two">
<div class="three"></div>
<div class="three"></div>
</div>
<div class="threeB"></div>
<div class="threeB"></div>
</div>
<div class="one">
<div class="two">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
<div class="threeB"></div>
<div class="threeB"></div>
<div class="threeB"></div>
</div>
According to which of threes in two a user clicks, one of the threeBs are displayed. I wanted to do this with .index() function, but it fails for all but the first ones. In the second one class, the two threes have indexes 3 and 4 (instead of desired 0 and 1). On the other hand, .eq() for threeBs seems to work as desired.
Any neat way to solve this without having to count how many threes were there before the div in question?
It is working like this:
$('.three').click(function(){
$(this).parent().parent().find('.threeB').eq($(this).index())
.css('background','green');
});
Check here: jsFiddle
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 months ago.
Improve this question
I tried many solutions to remove the text-decoration from p but without any progress.
The HTML looks like this
<div class="container-fluid my-container align-items-center">
<div class="row my-row">
<div class="col-md-3 ">
</div>
<div class="col-md-9 ">
<div class="thumbnail d-flex justify-content-center imagePreview">
<a href="#############" target="_blank">
<img src="../assets/img/thumbnails/Apelles_230x177cm_2020__.jpg" alt="" style="width:400px;">
<div class="caption">
<!--########### Here is the p-->
<p id="captionStyle">Apelles<br>2020</p>
</div>
</a>
</div>
Browsers automatically add underscores to links for accessibility. To clear it, you can use reset.css or write this snippet:
a { text-decoration: none }
P.S. You can search CSS Reset, Normalize, and browser styles for more information.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
How Can I add these JSON values to text field in HTML.
JSON:
"data": [
{
"zamestnanci": "3",
"konvoje": "0",
"pozice": "1533",
"kilometry": "5445"
}]}
I need add these 4 values to these 4 text fields:
<div class="counter-item">
<h2>here value 1</h2>
<h6>Odjeté konvoje</h6>
</div>
<div class="counter-item">
<h2>here value 2</h2>
<h6>Odjeté konvoje</h6>
</div>
<div class="counter-item">
<h2>here value 3</h2>
<h6>Pozice</h6>
</div>
<div class="counter-item">
<h2>here value 4</h2>
<h6>Najeté kilometry</h6>
</div>
You can use jQuery to select h2 child in class counter-item, and assign value to it.
Please refer below CodingGround URL:
http://tpcg.io/MFiJda
This question already has answers here:
Is it possible to use AngularJS with the Jinja2 template engine?
(2 answers)
Closed 6 years ago.
I'm using ng-repeat for getting my url dynamically and using ng-src to bind that url through angularjs.
Here's the code
<div class="x_panel" ng-repeat="data in allreviewdata|filter:search">
<div class="x_content">
<div class=" review-panel">
<div class="row"style="margin-bottom:30px;" >
<div class="col-lg-4">
<span ng-bind="data.Channel"></span>
<span class="name_date" style="font-size:10px; font-color:#DCDCDC;" ng-bind="data.Date">date</span>
</div>
<div class="col-lg-4 pull-right"style="text-align:right;" ng-bind="data.Sentiment">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="text-align:center;">
<img ng-src="data.pic_url" alt="logo" width="100px;"class="review-panel-logo">
</div>
But I was unable to get the proper url. I had also used {{data.pic_url}} but its giving error. Also its giving this error
error
Can anybody has the solution for this ?
Thank you in advance ..!
Use in this way
<img ng-src="{{data.pic_url}}">
You need to have like this,
<div ng-controller="myCtrl">
<img src="http://{{data.pic_url}}"/>
<img ng-src="http://{{data.pic_url}}"/>
</div>
DEMO
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm learning all the webdev, now for gaming community purpose I'm making a website which is similar to periodic table. It cointains for now about 25 "elements" but only blocks displayed without any info.
I want to make it open a dialog box (can't find any other name for it), similar to wowhead's table which contains item's info but I wan't it open on click, not on hover, and want it to act like lightbox, open on middle of screen with background grayed out.
Number of elements will rise to about 80, and here is my question:
Should I make for every such an element html file, which will be dispalyed in dialog, or use data base for it?
I think Bootstrap is probably to simplest solution for the layout and the Modal (the popup box).
You really only need one modal.
You can give each of your "blocks" a data attribute and store an item id there.
Then, when a user clicks a block, get the id from the attribute
use the id to get the information for the item from your database (myriad of ways to do that)
then populate that info into the modal.
Here's a contrived example (without the getting info from database part which could vary greatly depending on how you want to do that.)
$('.container').on('click', '.block',function(){
var id=$(this).data('id');
$('#blockId').html(id);
$('#myModal').modal({show:true});
});
/* CSS used here will be applied after bootstrap.css */
.block{
background-color:#ccc;
height:100px;
width:100px;
cursor:pointer;
}
#blockId{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-2"><div class="block" data-id="123"></div></div>
<div class="col-xs-2"><div class="block" data-id="456"></div></div>
<div class="col-xs-2"><div class="block" data-id="789"></div></div>
<div class="col-xs-2"><div class="block" data-id="234"></div></div>
<div class="col-xs-2"><div class="block" data-id="567"></div></div>
<div class="col-xs-2"><div class="block" data-id="678"></div></div>
</div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>The id of the block you clicked was <span id="blockId"></span> use that to get stuff from your database</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This question already has answers here:
jQuery move node out of its parent
(3 answers)
Closed 7 years ago.
I am trying to take a div (in this case "childDiv2") and its contents and move it before its parent.
So essentially take this
<div id="parentDiv">
<div class="childDiv1">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
<div class="childDiv2">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</div>
and make it this
<div class="childDiv2">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
<div id="parentDiv">
<div class="childDiv1">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
</div>
I know I probably need to use .parent() and .before() to get it to work, but I'm stuck on how the jquery would look. Any ideas?
You would use the .insertBefore() method:
$('#parentDiv .childDiv2').insertBefore('#parentDiv');