We Keep Coding

show/hide icon not fixed

I have that problem when I resize my screen, the icon goes off my input tag, I put it in the same div but it somehow doesn't work, because that icon is included in html from javascript, is that maybe a problem?
Here's the html code:
<div class="skup">
<input v-model="lozinka" type="password" class="form-control" id="password">
</div>
Javascript link to html:
this.$element = element;
this.$button = $(`<button class="btn-toggle-pass"><i class="fa ${this.options.icon}"></i></button>`);
Classes:
.btn-toggle-pass {
position: absolute;
background: transparent;
border:none;
}
.skup{
position:relative;
width:100%;
}
#password {
position:absolute;
width:100%;
}
This is how it's supposed to look:
I could fix that with margins but that's not practical. Any help would be appreciated.

you could set that using the right property The right CSS property participates in specifying the horizontal position of a positioned element.

How to bring a specific overlayed image to the foreground

I prepared a JSFiddle here to explain my problem.
What I'm trying to accomplish:
I am making a grid out of four transparent square PNGs that float left
each PNG is clickable as a label for a checkbox
when a box is clicked the opacity of the PNG should change to show it's active
grid layer should be on top of a "background image"
"background image" is loaded dynamically so it cannot use CSS
"background image" is a separate div with position:absolute
user clicks on a given square of the grid
user submits form that contains checkbox info (from clicked boxes)
My problem:
without the "background image" the script works as expected
with the "background image" it stays in the foreground and when I click it activates the image itself, making it semi-transparent
My question:
how do I bring the PNG squares to the foreground so they are clickable and change in opacity, the user having no interaction with the "background image"?
HTML
<div class="wrapper">
<span>
<label for="R0_C0">
<img src="http://i.stack.imgur.com/EWwTE.png">
</label>
<input type="checkbox" name="R0_C0" value="1" class="hidden_checkbox" id="R0_C1">
</span>
<span>
<label for="R0_C1">
<img src="http://i.stack.imgur.com/EWwTE.png">
</label>
<input type="checkbox" name="R0_C1" value="1" class="hidden_checkbox" id="R0_C1">
</span>
<span>
<label for="R1_C0">
<img src="http://i.stack.imgur.com/EWwTE.png">
</label>
<input type="checkbox" name="R1_C0" value="1" class="hidden_checkbox" id="R1_C0">
</span>
<span>
<label for="R1_C1">
<img src="http://i.stack.imgur.com/EWwTE.png">
</label>
<input type="checkbox" name="R1_C1" value="1" class="hidden_checkbox" id="R1_C1">
</span>
</div>
<!-- comment/remove code below this line to see the expected behavior -->
<div class="bg_img">
<img src="http://i.stack.imgur.com/4bVu3.jpg" />
</div>
CSS
.wrapper {
width: 64px
}
span {
float: left
}
.hidden_checkbox {
display: none
}
.selected_checkbox {
opacity: 0.5;
}
.bg_img {
position:absolute
}
JS
$(function() {
$('img').click(function() {
$(this).toggleClass('selected_checkbox');
});
});

Use z-index to help specify that you want your image to be in the background like so:
.bg_img {
position:absolute;
z-index: -1;
}
Updated Fiddle: https://jsfiddle.net/u177yr8z/3/
More information on z-order/z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Improving your selectors would help. Even using "label > img" would prevent the background image from being roped into click events.
Basically any css selector argument is valid to use with jQuery, so just be more specific when you tell it what you're listening for.

I want to display my text after my thumbnail slider div

I want to display my text after my thumbnail slider div something like this,
my active slider class: "itm0 selected"
my thumbnail id: "thumbs"
i want to display text below my #thumbs div automatically when it is active
i tried this CSS, but not worked,
.itm0 .selected{
#thumbs::after{
content:"first active image";
}
}
.itm2 .selected{
#thumbs::after{
content:"second active image";
}
}
html:
<div id="thumbs">
<img class="itm0 selected"></img>
<img class="itm1"></img>
</div>
when 2nd img active in slider
<div id="thumbs">
<img class="itm0"></img>
<img class="itm1 selected"></img>
</div>
etc.
anyone have some solution?
or how can I do it in javascript?
I am new newbie.. give some idea friends

If you're open to using jQuery, you can do the following.
Fiddle: https://jsfiddle.net/79fryyz1/
HTML
I've added an additional div under the #thumbs div. I've given it a class called caption. This will be used to show the text under the div. Then, I've added a data attribute called data-caption to store the text to be displayed after each image. I've also added a toggle button for demonstration purposes.
<div id="thumbs">
<img class="itm0 selected" src="http://bit.ly/1S6znnc" data-caption="first active image"/>
<img class="itm1" src="http://bit.ly/1MKyvBI" data-caption="second active image"/>
</div>
<div class="caption">first active image</div>
Toggle
JS
When the image slider is changed, and a new image is selected, you can pick up the caption from the data attribute and display it under the #thumbs div.
$('.toggleBtn').click(function() {
$('img').toggleClass('selected');
var caption = $('img.selected').data('caption');
$('.caption').html(caption);
});

That's a strange way of doing it, but here's how it could work...
.thumbs {
width:100px;
height:100px;
float:left;
margin:10px;
background:green;
}
.thumbs:after {
content: ' ';
position:absolute;
background:#000;
color:#fff;
border-radius:5px;margin:100px 0 0;
}
.thumbs:nth-child(1):hover:after {
content:"first thumb";
}
.thumbs:nth-child(2):hover:after {
content:"second thumb";
}
<div class="thumbs"></div>
<div class="thumbs"></div>

Displaying a relatively positioned div (with absolute content) at top of page

I have a page which contains a relatively positioned div with absolute content. Here is a jsfiddle.
When I click #view1, I want #view2 to move to the top of the viewport. The debugger shows the click being handled but nothing changes in the display.
Can anyone help.
Here is the example:
$(document).ready(function(){
$("#view1").on("click", function (){
$("#view2").scrollTop(0);
});
});
</script>
<style>
body,div,img { padding:0; border:0; margin: 0; }
img, #view1 { position: absolute; }
#view2 {position: relative; }
</style>
</head>
<body>
<p>
Lots of stuff up here, so div below scrolls off page.
</p> ... more stuff
<div id="view2">
<div id="view1" > <img src="http://lorempixel.com/100/175/" /></div>
</div>
<p>
Lots more stuff down here ....
</p>

Of course it won't show any change. As you are not doing anything with $("#view2").scrollTop(0); . By the way, why you have put 0 inside the parenthesis ? It is not needed.
scrollTop()
It returns the vertical position of scrollbar (of matched element).
http://www.w3schools.com/jquery/css_scrolltop.asp
Write this alert($("#view2").scrollTop()); , instead of $("#view2").scrollTop(0);
It will return you an integer.

Make a div fade out on focus of a text area

I have a div that I'd like to have fade out using JavaScript when a certain text area is clicked/focused. Is this possible?
Text area HTML
<label for="message">Message:</label>
<textarea name="message" id="message" wrap="physical"
placeholder="What's on your mind?">
</textarea>
HTML for div I'd like to fade out
<div id="bubble">
<img src="images/hire_me_bubble.png" alt="Hire me" />
</div>
CSS for bubble
#bubble{
width:201px;
height:189px;
position:absolute;
left:416px;
top:300px;
z-index: 99;
overflow:visible;
}

Try this:
$("#message").focus(function() {
$("#bubble").fadeOut();
}).blur(function() {
$("#bubble").fadeIn();
});​
It binds two events to the textarea, one to the focus event, and one to the blur event.
http://jsfiddle.net/FzmW2/
If you don't want it to fade back in, remove the .blur part.

$('#message').bind('focus', function(){
$('#bubble').fadeOut();
});