We Keep Coding

Center this text inside this special image slider

I need to get the text inside these images.
The overview of the problem -> I basically need to have text inside each image.
Link to codepen --> https://codepen.io/martispyc/pen/KKmjWZj?editors=1100
Appreciated if the slider would slide these kinds of divs, not the images and text, but whatever works!
<div class="slider__images--container">
<img src="" alt="" class="slider__images--container-img">
<h3 class="slider__images--container-h3">Example</h3>
</div>

So, for everyone wondering, I solved it myself! I did put text inside and I am proud of it. The basic way I did it was as follows:
I added the same amount of text blocks as my slider has images. After that,
I coded some javascript so the nth text block as the nth image has the class .active
2.5 text had absolute positioning so I can move it around and `a z-index of >1
.active == opacity 1, .unactive == opacity 0.
And then I made it so every time it slides it checks which one has to be active (text block) and add the class and remove active from the last one.
Added a transition and boom!
(Basic rundown of how I did it, won't share the code only because of the thrill coding it up yourself!) byebye!
PS. I won't accept my answer just so if there's someone willing to put a real answer, go for it!

Limit text size by lines in angular ng-repeat

I want to limit the number of lines that a <p> can have, based on a text in ng-repeat, my ng-repeat loop:
<ul class="list-unstyled">
<li ng-repeat="comment in ad.comments>
<p id="moreButton"> {{comment.text | limitTo: CommentTextLimit}}
<a ng-show="comment.text.length>25"> <span id="moreLess" span ng-click="changeLength(CommentTextLimit)" >{{moreLessText}}</span></a>
</p>
</li>
</ul>
I want to limit the comment.text field and if the user clicks on the show more button more lines will appear, the first problem is that any changes apples to all comments instead of one, the second one is that I want to limit by rows and not by comment.text.length

In the past I have used 2 different techniques to solve this. Sometimes I would just concatenate the length of the string according to a fixed length.
Since you said you don't want to use this technique, The other way I did it a few times, was adding the css style max-height and overflow:hidden to the bounding element.
Then you can create a directive that will detect the actual height of the element, and tell if part of the element is hidden because of the max-height.
(You can do this like this : https://stackoverflow.com/a/143889/230377)
If the element is "overflowing" then it means part of the text is hidden, and then I would display a "see more" link at the bottom right corner of the bounding element.
I would place this element in the bottom right corner by using css (and not just adding it inline)
The css of the "see more" element should look something like this :
.see-more-link {
position:absolute;
bottom:0; right:0;
}
You also need to set the bounding element to have position:relative.
Sorry, I wanted to add a link to a working example of this in one of my github repos, but I can't find it now... Hope this helps.

So you seem to have two problems here:
Limiting your no. of lines in the <p> tag: Well for this you can either try what has been suggested in the previous comment or maybe you can play with track by $index option in your ng-repeat.
Change getting applied to all the comments: In you ng-click method pass the id/object of the element you want to apply the changes to. Create/Define IDs using $index feature of ng-repeat.

How to create search box that extend itself when displaying filter?

I want to create a search box that extends itself downward when user input something
Here is an example
Right now I set up the html such that it displays all the possible values at the bottom of the search box
Search: <input ng-model="query">
<ul class="my_possible_values">
<li ng-repeat="possible_value in my_possible_values | filter:query">
{{possible_value}}
</li>
</ul>
However the listed element pushes down other div element below the search box instead of overlaying it.

You should put a position: absolute style on your .my_possible_values class -- that is how I've made/styled my search box dropdowns in the past. This will take the dropdown content out of the normal flow of the DOM, thus preventing it from pushing down the other divs on the page.
You can read more about CSS positions on this page :)
http://www.w3schools.com/cssref/pr_class_position.asp
Additionally, you'll probably want to add overflow-y: scroll and a max-height style to your .my_possible_values menu as well so that it does not overflow the bottom of the page if you have a lot of dropdown options.
I'd say those are the most important CSS rules for creating a good dropdown list. Good luck!

Drop down div doesn't stay visible

I am trying to make a drop down list and I have made it somewhat work. When I put the mouse over the area, a div in the shape of the drop down becomes visible. Then when you put your mouse over anything in the div, it disappears. That is obviously not meant to happen. Here is my code. Any solution is greatly appreciated.
HTML:
<li><a onMouseOver="showServersDropDown()" onClick="showServersDropDown()" class="three-d">
Servers
<span aria-hidden="true" class="three-d-box">
<span class="front">Servers</span>
<span class="back">Servers</span>
</span>
</a></li>
<div onMouseOut="hideServersDropDown()" id="serversDropDown">
<p>Live Map</p>
</div> <!--This ends the Server List Drop Down Div-->
JS:
function showServersDropDown() {
document.getElementById("serversDropDown").style.display="block";
}
function hideServersDropDown() {
document.getElementById("serversDropDown").style.display="none";
}

I wasn't able to reproduce this exact issue, but it sounds like the problem is caused by hovering over the child elements of the div firing the onmouseout event of the parent div. I found this answer that should help you with that: prevent onmouseout when hovering child element of the parent absolute div.
I also noticed that you are changing display to none. Once the display is set to none, the div won't render at all on the browser, which will prevent mouse events from firing on it, so hovering in that area will not cause it to reappear. I found another answer here about hovering over a hidden element to reveal it: Hover over a hidden element to show it.
Also, it seems like you are missing an onmouseover event to reveal the drop down list when you hover over it, although I may be mistaken in what you are trying to accomplish.
So in all, with two modifications to your Javascript and a small modification to your HTML, I think you can achieve your intended result with this:
<div onmouseout="hideServersDropDown(event)" onmouseover="showServersDropDown(event)" id="serversDropDown">
<p>Live Map</p>
</div> <!--This ends the Server List Drop Down Div-->
function showServersDropDown(event) {
document.getElementById("serversDropDown").style.opacity="1";
}
function hideServersDropDown(event) {
var e = event.toElement || event.relatedTarget;
if (e.parentNode == this || e == this) {
return;
}
document.getElementById("serversDropDown").style.opacity="0";
}
I only put the event blocking code in hideServersDropDown since you would want the onmouseover event to fire and show whether you are hovering over a parent or a child in the div. I hope this helps!

It's usually because the mouse is leaving the original div, the key is to make the submenu a child of the main div:
<ul class="menu">
<li>
<a>nav title</a>
<ul>
<li><a>sub link</a></li>
</ul>
</li>
</ul>
Then in pure css you can handle this:
.menu ul { display: none }
.menu li:hover ul { display: block }

IE8 jQuery text changes on z-index divs

I'm using the jQuery Cycle plugin to cycle through some images on a webpage.
Each image also has various meta-data (title, description) that is also displayed on the page. Whenever the image changes, the title and description text also change to the title and desc for that image.
<div id='slides'>
<a href="http://whatever.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide1.jpg"/>
</a>
<a href="http://somewhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide2.jpg"/>
</a>
<a href="http://nowhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide3.jpg"/>
</a>
</div>
<div id='slideshow_text'>
<div id='ss_title'>The title goes here</div>
<div id='ss_desc'>The description goes here</div>
</div>
The javascript is pretty simple:
jQuery(document).ready(function(){
jQuery('#slides').cycle({
fx: 'fade',
speed: 1000,
timeout: 10000,
after: alterSlideText,
});
});
The alterSlideText javascript function is very simple. Basically its just running this:
jQuery('div#ss_title').html(slides_array[slideNum]['title']);
jQuery('div#ss_desc').html(slides_array[slideNum]['desc']);
The slides_array is simply an array of the title and description for each slide. So depending on what slide is currently being shown, it picks the appropriate title and description to put in the divs.
So overall the setup is very simple and straightforward. Image changes. Then the text changes.
Now the problem - This all works perfectly in Moz and Webkit. But in IE, the text div's will not change UNTIL I move my mouse over the slides div or slideshow_text div. The text will just not change at all if I just let it sit there. Once I move my mouse into that div, boom it changes to the appropriate text.
One maybe important note, the slideshow_text div has a very high z-index value (1000) and it actually floating over part of the image. I have just confirmed that text in other div's with normal z-index values changes just fine. It's only these divs with the high z-index value that aren't changing until I mouse over it.
Does anyone have any clue as to why this is and how to fix it?

I fixed this by adding the following to the end of the alterSlideText function:
// Force IE to refresh itself
jQuery('div#slides').blur();
jQuery('div#slides').focus();
Great job IE developers. Go find a different job.