show/hide icon not fixed - javascript

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.

Related

How to change a css class selector using javascript

Hi guys i'm attempting to change the top location of a popup using JavaScript. Here is the CSS code:
.popup .content {
position:absolute;
top:34.2%; //This is what i'm attempting to change
left:183%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:647px;
height:333px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
}
And here is the javaScript
function togglePopup(){
if(document.getElementById("Check1").checked){
//Change popup content's top position here
document.getElementById("popup-1").classList.toggle("active");
}
Here is some of the HTML if needed
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
//inputs go in here
</div>
Try:
function togglePopup() {
if (document.getElementById("Check1").checked) {
//Change popup content's top position here
document.getElementById("popup-1").style.top = '10%';
}
}
(not tested)
I see that you want to modify the
.popup .content {
top:34.2%; //This is what i'm attempting to change
which is the second child of the container with .popup class
but in javascript you get the parent container, which would be .popup class or #popup-1 id
With the code you provided I can't manage to test , but there might be an issue there

image pop up on a steady position

What is the right syntax to make my pop up image show on the left side of the screen?
jQuery
$("#qm3").mouseover(function(){
$("#osf").show();
});
$("#qm3").mouseout(function(){
$("#osf").hide();
});
HTML
<span><input type="text" id="tb1"><img id="qm3" src="images/WebResource.png"></img></span><span><img id="osf" src="images/osf.jpg" style="position: right; display:none;"></img></span>
As of now, whenever I'm pointing my mouse to qm3, the pop up shows, but it affects the positioning of my page.
http://codepen.io/anon/pen/vENZeK
This could be simplified, if you get rid of the spans and wrap a div around it:
http://codepen.io/anon/pen/OPygOg
js
$(".show").hover(function(){
$(this).next('img.hide').fadeToggle();
});
html
<div>
<input type="text" id="tb1">
<img class='show' src="http://placekitten.com/42/41"/>
<img class="hide" src="http://placekitten.com/40/41"/>
</div>
css
div { postition:relative; padding-left:45px;}
.hide { display:none; position:absolute; left:5px; }

repositioning text boxes in CSS

Good morning everyone,
Sorry not sure how to word the question.
I have came across this problem, I can't seem to make the 'your email' box and 'your password' box align together. When you preview it in full screen, it will be how I want it but when I shrink the screen they start to go weird. Like this:
I want it like this but on a big screen
This is what happens on a big screen
I would like it so they are both under each other and both in the same place. Please could you help me?
Please visit http://jsfiddle.net/xiiJaMiiE/8S5VG/ to see my code so far.
#top_box
{
background: grey;
height: 50px;
left: 80.8%;
width:20%;
position: relative;
top: 0;
z-index: 5;
}
There were some errors in your HTML like unnecessary spacing and invalid tag names. I made it good. Replace your html with the following HTML code:
<body>
<div id="wrapper">
<div id="top_box">
<div class="homeform">
<input type="email" placeholder="Your E-Mail">
<input type="password" placeholder="Your Password">
<input type="Submit" value="Login">
</div>
</div>
<div class="background"></div>
<div id="menu_box"></div>
<div id="main_box"></div>
<div id="Bottom_box"></div>
</div>
</body>
And also remove height from #top_box.
Working Fiddle
add line break between the two input boxes
<input ... />
<br />
<input .../>
http://jsfiddle.net/8S5VG/1/
or make the inputs to display:block
[you had a slight mistake in the css]
http://jsfiddle.net/8S5VG/2/#update
you calling homeform as an ID is you css but in your html it is a class replace the # with a . before homeform
you also have extra spacings that are moving the boxes, clean your html get rid of all unnecessary spaces
.homeform
{
position:relative;
height:20px;
width:auto;
}
Tyr This
#top_box {
background: grey;
min-height: 50px;
min-width: 164px;
left: 80.8%;
width: 20%;
position: relative;
top: 0;
z-index: 5;
}
Give in enough space for the inputs to be in place.
Hope this helps. if you need further assistance just let me know.

javascript setting width dimensions changes element location

I'm trying to adjust the width of a div that is centred using JavaScript when a menu button is clicked, but when I do the width changes ok but it sets the element about 20px downwards too. This created a large empty gap above contentSectionLeftSide.
Here's what I've got:
function setButtonH(e){
var item = e;
var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];
if(e==items[1])
{
document.getElementById("contentSectionLeftSide").style.width="600px";
document.getElementById("contentSectionRightSide").style.width="300px";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
else {
document.getElementById("contentSectionLeftSide").style.width="45%";
document.getElementById("contentSectionRightSide").style.width="45%";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
}
HTML
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)">
Home
</div>
<div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)">
Interests
</div>
<div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)">
Creations
</div>
<div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)">
Bio
</div>
</nav>
#contentSectionLeftSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
#contentSectionRightSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
I think I have a handle on the situation now, and recreating your code locally I did notice a small gap above the left content section.
The problem is that because your divs' content are (probably) resulting in different div heights, the display: inline-block CSS declaration is causing them to be vertically aligned to each other at the bottom baseline, so all you need to do is tell the CSS to align them vertically to the top.
I constructed the left- and right-hand side content areas like this, below the HTML you provided:
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1')">Home</div>
<div id="menu_item2" onclick="setButtonH('menu_item2')">Interests</div>
<div id="menu_item3" onclick="setButtonH('menu_item3')">Creations</div>
<div id="menu_item4" onclick="setButtonH('menu_item4')">Bio</div>
</nav>
<div id="contentSectionLeftSide">Left side content!</div>
<div id="contentSectionRightSide">
Right side content!<br />
There's a little more content in here!
</div>
I also removed the menuGo(#) function from the onClick's, as I didn't know where that functionality went. Side note: be careful here, as in your code above it reads (for example):
onclick="setButtonH('menu_item2'), menuGo(2)"
Where it should be:
onclick="setButtonH('menu_item2'); menuGo(2)"
Which could yield problems down the line.
However, back to the solution, all you need to do is add the line vertical-align: top; to each of your content areas' style declarations, and they'll be aligned to the top, effectively:
#contentSectionLeftSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
#contentSectionRightSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
Here's a working fiddle for you to see it in action. Hope this helps, good luck and keep coding! :)

jQuery slideDown() moves everything below downwards. How to prevent this?

I have a small problem with jQuery slideDown() animation. When this slideDown() is triggered, it moves all stuff below downwards too.
How do I make all the stuff below the <p> being slid down, remain stationary ?
Note:
I would prefer a solution where the change is done to the <p> element, or to the slideDown call or something. Because in my actual page, there is a lot of stuff below the <p> being slid down, so changing/re-arranging all of them will take much longer for me ~
Demo # JSFiddle: http://jsfiddle.net/ahmadka/A2mmP/24/
HTML Code:
<section class="subscribe">
<button id="submitBtn" type="submit">Subscribe</button>
<p></p>
</section>
<div style="padding-top: 30px;">
<table border="1">
<tr>
<td>This table moves</td>
<td>down when</td>
</tr>
<tr>
<td>slideDown()</td>
<td>is activated !</td>
</tr>
</table>
</div>
JavaScript:
$(function () {
$("#submitBtn").click(function (event) {
$(".subscribe p").html("Thanks for your interest!").slideDown();
});
});
CSS:
.subscribe p {
display: none;
}
You can position that element as absolute:
.subscribe p {
display: none;
position : absolute; // add this line
}
Demo: http://jsfiddle.net/A2mmP/25/
What's happening with your existing code is that the element starts out as display:none; so it doesn't take up any space at all until you slide it in and it is changed to display:block, hence the movement down of the following elements.
With position:absolute it doesn't take up space in that sense, it overlaps: in fact in my updated version of your fiddle you can see a slight overlap into the table underneath - you can obviously tweak margins on the table or whatever to make it fit the way you want.
All you need is to give a fixed height of your .subscribe.
.subscribe {
height: 50px;
}
.subscribe p {
margin: 0px;
display: none;
}
Here is the jsFiddle : http://jsfiddle.net/xL3R8/
Solution
We will put the sliding element in a div element with a fixed width, preventing the document flow from being affected by the slide event.
HTML
<section class="subscribe">
<button id="submitBtn" type="submit">Subscribe</button>
<!-- this is the modified part -->
<div><p></p></div>
</section>
CSS
.subscribe div
{
/* We force the width to stay a maximum of 22px */
height:22px;
max-height:22px;
overflow:hidden;
}
.subscribe div p {
display: none;
/* We reset the top margin so the element is shown correctly */
margin-top:0px;
}
Live Demo
The problem is your CSS, it will render as block and push the other elements down when it slides in. Set it to be absolutely positioned and change the z-index to be in front, or behind.
.subscribe p {
display: none;
position: absolute;
z-index: 100;
}
Fiddle
.subscribe p {
display: none;
margin :0px;
}
IMO a good UI practice would be to, remove the subscribe button, and instead show a message there like :
"Hurray! You have been subscribed"
e.g
http://jsfiddle.net/UvXkY/
$(function () {
$("#submitBtn").click(function (event) {
$("#submitBtn").slideToggle('slow', function(){
$(".subscribe p").html("Thanks for your interest!").slideDown();
});
});
});
The actual problem your facing is display:none which will remove the space for the element p
where as visiblity:hidden and showing will get ride of this problem
Even though it will not give the proper slideDown effects so you can use the position absolute and keep some spaces for the p element will solve your problem.
one of the solution
.subscribe p {
position:absolute;
display:none;
}
.subscribe
{
position:relative;
height:50px;
}
FIDDLE DEMO

Categories