Why jQuery .width() and .css( "width" ) produces different width in IE - javascript

When I set width:100px; (just for testing purposes) in CSS, all the browsers alert as 100-100px which is fine however when I remove width:100px; (because the content is always in different lengths) in CSS, IE result is either less or more about a few pixels than the other browsers.
Any idea why it is happening?
Thanks
HTML:
<div id="clickhere">CLICK HERE</div>
<div id="login">This is login box</div>
JQUERY:
$(document).ready(function()
{
$('#clickhere').click(function(event)
{
alert($('#login').width() + '-' + $('#login').css( "width" ));
event.stopPropagation();
});
});
CSS:
*
{
margin: 0;
padding: 0;
}
body, html
{
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: normal;
}
#login
{
position: absolute;
z-index: 100;
right: 0px;
/*width:100px;*/
top: 21px;
text-align: right;
font-size: 11px;
padding: 3px 7px;
border: 1px solid #DDDDDD;
background-color: #F5F5F5;
}

Related

Border to stop reducing size when clicked

I'm working on an accordion. I've used jQuery for the animation. When I click on the accordion head the border that holds the + reduces in size. I only want the plus sign to change and the border to stay the same size.
$(document).ready(function() {
//toggle the component with class accordion_body
$(".accordion_head").click(function() {
$(this).removeClass('coll-back');
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(400);
$("plusminus").text('+');
$(this).removeClass('coll-back');
$('.rmv-cls').removeClass('coll-back');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(400);
$(this).children("plusminus").text('+');
$(this).removeClass('coll-back');
} else {
$(this).next(".accordion_body").slideDown(400);
$(this).children("plusminus").text('');
$(this).children("plusminus").append('<hr class="hr-clc">');
$(this).toggleClass('coll-back');
$(this).addClass('rmv-cls');
}
});
});
$('plusminus').on("click", function() {
$(this).toggleClass('active');
$(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
}
#plus-1 {
position: relative;
top: 5px;
left: -27%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
<div class="acc-main">
<div class="container">
<div class="kind">
<div class="accordion_container">
<div class="accordion-main">
<div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
</div>
<div class="accordion_body" id="a1" style="display: none;">
<p class="para-acc">
</p>
</div>
</div>
</section>
The font used has its characters with different width, that is the characters + and - have different width. So when they switch, it affects the total width of the block.
You can solve it using a monospaced font, such as Monospace, Courier, Courier New or Lucida Console.
Another solution would be set a fixed width for the block.
First, the <span> must be an block element. You add to it display: inline-block. Then padding will be considered within total width as default, so you have 25px padding for left and right. Your block is about 72px (when +), then you can add width: 22px (50px + 22px = 72px fixed width).
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
display: inline-block; /* add this */
width: 22px; /* add this */
}
A little bit the height of the accordion head will change with that, but nothing big.
Add the following css code
.plusminus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
}
You have already added .active class to .plusmimus class on click of the accordion. I have added some extra CSS code to make it look better as you required.
$(document).ready(function() {
$('.plusminus').on("click", function() {
$(this).toggleClass('active');
});
});
.plusminus {
display: inline-block;
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 30px;
cursor: pointer;
position: relative;
}
.plusminus::before,
.plusminus::after {
position: absolute;
content: '';
width: 16px;
height: 2px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #FFF;
transition: 0.15s ease-out all;
}
.plusminus::after {
width: 2px;
height: 16px;
}
.plusminus.active::before {
transform: rotate(180deg);
}
.plusminus.active::after {
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>
Please let me know if this helps.

Vertically center search box before and after inserting another elements

$(function() {
$('.forminput input[type="text"]').on('input propertychange', function() {
var $this = $(this);
var visible = Boolean($this.val());
$this.siblings('.glyphicon').toggleClass('hidden', !visible);
}).trigger('propertychange'); //nema potrebe za njim
$('.glyphicon').click(function() {
$(this).siblings('input[type="text"]').val('')
.trigger('propertychange').focus();
$('.results').empty();
});
$('.forminput').on('submit', function(event) {
event.preventDefault();
var typed = $('.nice').val();
$.getJSON('http://en.wikipedia.org/w/api.php?callback=?', {
action: 'query',
srsearch: typed,
format: 'json',
list: 'search'
}, function(data) {
$('.results').empty();
console.log(data);
$.each(data.query.search, function(index, item) {
$('.results').append("<a class='append' href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + "<div class='appendsearch'><h1>" + item.title + "</h1><p>" + item.snippet + "</p></div></a>")
})
})
})
})
body {
background: rgb(9, 43, 64);
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
height: 90vh;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.container {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.glyphicon {
color: #B2DFDB;
}
.textbox {
text-align: center;
}
.randomArticle {
color: #B2DFDB;
font-size: 1.4em;
}
.randomArticle:hover {
text-decoration: none;
color: pink;
cursor: pointer;
}
.randomArticle:link {
text-decoration: none;
color: #B2DFDB;
}
form {
margin-top: 30px;
margin-bottom: 30px;
}
form .nice {
width: 300px;
border-radius: 10px;
border: 5px solid orange;
background: transparent;
color: white;
padding: 7px 15px;
}
form .nice:focus {
outline: none;
}
.button {
border-radius: 10px;
border: 5px solid orange;
padding: 7px 15px;
margin-left: 20px;
background: transparent;
color: #B2DFDB;
}
.button:hover {
background: #00897B;
}
.button:focus {
outline: none;
}
.append {
color: black;
}
.append:hover {
text-decoration: none;
}
.appendsearch {
background: rgb(230, 230, 231);
margin: 20px 70px 20px 70px;
padding: 10px 20px;
color: black;
border-left: 4px solid rgb(9, 43, 64);
font-weight: 500;
}
.appendsearch h1 {
font-size: 20px;
font-weight: bold;
}
.appendsearch p {
font-size: 15px;
}
.appendsearch:hover {
border-left: 4px solid orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='wrapper'>
<div class='textbox'>
<a class='randomArticle' href='https://en.wikipedia.org/wiki/Special:Random' target='_blank'>Click here for a random article</a>
<form class='forminput'>
<input class='nice' type='text'>
<span class='glyphicon glyphicon-remove hidden'></span>
<input class='button' type='submit' value='Search'>
</form>
</div>
<div class='results'></div>
</div>
</div>
</body
I cant get elements to be vertically centered before and after search results are inserted. I tried a lot of options but all I get is situation where search box is inserted on the left side of search result.
Here is the sample > http://codepen.io/Todorovic/pen/PGrqOp
What I did to make this work, is to add some line of code with jQuery.
To to center div horizontally and vertically change css:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : function() {return -$(this).outerWidth()/2},
'margin-top' : function() {return -$(this).outerHeight()/2}
});
For working with dimensions if you are not familiar check:
http://api.jquery.com/outerwidth/
http://api.jquery.com/outerheight/
And down in your code after submit form change again css of div to put it on top of page:
$('.textbox').css({
'position' : 'absolute',
'left' : '50%',
'top':'0%',
'margin-top' : '30px',
'margin-left' : function() {return -$(this).outerWidth()/2},
});
After append results add margin-top for div:
$('.results').css({
'margin-top': $('.textbox').height()
})
})
Here is CodePen example:
http://codepen.io/anon/pen/NRZwEJ
Hope the elements are not dynamic, and you have a fixed structure of elements around the search box. After finalizing the element structure and the styling of them you have to identify the height of the textbox element. At the moment it is 47px. We will use this value in the following css.
Next add the following styles into the css.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
Please note that the value of the margin-top is half of the 47px( half of the textbox element. )
Edit
Add the following line into your jquery code.
$('.forminput').on('submit', function(event) {
$('.textbox').addClass('pull-up');
After that, update you css with the following additional styles.
.textbox {
text-align: center;
position: absolute;
top: 50%;
margin-top: -23px;
}
.textbox.pull-up {
position: relative;
top: auto;
}

jQuery width, outerWidth, innerWidth - return fake values

I want to absolutely position my buckles for animation and this is my html:
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who"><span id="whospan"><B>LOREMSIT.DOLOR</B></span></div>
<div id="what"><div id="klamra_l">[</div><div id="klamra_r">]</div><span id="whatspan">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
I am using for it jQuery:
function ustawklamry()
{
var w_what = parseInt($("#what").outerWidth(true));
var w_whatspan = parseInt($("#whatspan").outerWidth(true));
var left = parseInt((w_what - w_whatspan)/2);
var right = parseInt(left + w_whatspan);
$("#klamra_l").css("left",left);
$("#klamra_r").css("left",right);
console.log(w_what + ";" + w_whatspan + ";" + left + ";" + right);
}
ustawklamry();
And what I get is:
And in console I see:
964;596;184;780
What is more, the space between buckles is equal to #whatspan (green field).
I have no idea why it is not working. I tried width, outerWidth, innerWidth and no one is working.
Please for help, if you want any additional data - ask.
First, I will address your following problem.
Oh my god, I see it is working good on fiddle but on my website not... I thought about problem while page is loading and I used $(document).ready(function(){... but it is not working too. Where is the problem?
This is because code from other parts of the page are be interfering with your code for this part of the page. If you can't find it anywhere in your javascript, then it must be in your CSS. Try opening up the dev tools (inspecting the page) and see what CSS values that menu is inheriting from its parent element in your production page. Then, try inspecting the JSfiddle page. Finally, try to get the CSS inherited from the parent element on the production page to be the same as the CSS inherited from the parent element on the JSFiddle page. Now it should work. Also, pay very close attention to !important tags. I have a sneaking suspicion that they might be the culprit.
To the next issue: you don't actually need javascript. Also, your layout is inflexible, it will look good on some devices, and bad on others because you don't make the size adaptive to the user's screen size. Here is a demo that works in IE9 and automatically resizes based on the user's screen size by using vw units in the font size, and transform: translateY(.125em) to center the brackets. Also, you could cut down on your DOM usage. Considering all these things, I hope you find this very useful:
#about {
border: 2vw solid #FFF;
padding: 3vw;
//border-radius: 50% / 50%;
display: inline-block;
background-color: black;
max-width: 80vw;
outline: 99vh solid black;
box-shadow: 0 0 0 99vw black;
overflow: hidden;
position: fixed;
top:0;bottom:0;
left:5vw;right:5vw;
margin: auto 0;
height: 17.5vw;
}
#weare {
color: #FFF;
font-size: 3vw;
margin: 0 auto;
text-align: center
}
#who {
color: #FFF;
font-size: 9vw;
margin: 0 auto;
font-family: Oswald, sans-serif;
text-align: center;
letter-spacing: 133%;
font-weight: bold;
}
#what {
color: #FFF;
font-size: 2.5vw;
margin: 0 auto;
font-weight: 300;
text-align: center;
vertical-align: middle;
background-color: red;
}
#greenbackground::before {
direction: rtl;
}
#greenbackground::after, #greenbackground::before {
content: ']';
font-size: 2em;
transform: translateY(.125em);
background: none;
line-height: 0;
display:inline-block;
color: white;
width: 0;
}
#greenbackground {
background:green;
display:inline-block;
height: 100%;
}
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who">LOREMSIT.DOLOR</div>
<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
JSFiddle Link
To add some snazzy roundness to it, all you need is 1 extra line of code.
#about {
border: 2vw solid #FFF;
padding: 3vw;
border-radius: 50% / 50%;
display: inline-block;
background-color: black;
max-width: 80vw;
outline: 99vh solid black;
box-shadow: 0 0 0 99vw black;
overflow: hidden;
position: fixed;
top:0;bottom:0;
left:5vw;right:5vw;
margin: auto 0;
height: 17.5vw;
}
#weare {
color: #FFF;
font-size: 3vw;
margin: 0 auto;
text-align: center
}
#who {
color: #FFF;
font-size: 9vw;
margin: 0 auto;
font-family: Oswald, sans-serif;
text-align: center;
letter-spacing: 133%;
font-weight: bold;
}
#what {
color: #FFF;
font-size: 2.5vw;
margin: 0 auto;
font-weight: 300;
text-align: center;
vertical-align: middle;
background-color: red;
}
#greenbackground::before {
direction: rtl;
}
#greenbackground::after, #greenbackground::before {
content: ']';
font-size: 2em;
transform: translateY(.125em);
background: none;
line-height: 0;
display:inline-block;
color: white;
width: 0;
}
#greenbackground {
background:green;
display:inline-block;
height: 100%;
}
<div id="about">
<div id="weare">lorem.ipsum</div>
<div id="who">LOREMSIT.DOLOR</div>
<div id="what"><span id="greenbackground">Lorem ipsum dolor sit amet, consectetur.</span></div>
</div>
JSFiddle Link

Issue with jQuery chat form

Thank you for the help in advance.
This project is a signup form that will use a chat system to collect the user's profile details during their onboarding process. This is my first jQuery project, so I am struggling to spot my mistakes.
My jQuery should append the value in the textarea to the #message-feed div and apply the CSS classes of .message, .bubble and .user to the new element it creates.
However, when I type into the text area and click submit, it flashes the value I have just typed with no styling in the message feed, but it instantly disappears.
The reason for this CSS structure is the interchangeability between the .bot and .user classes depending on whether it is a question presented to the user by the website, or a user's response to a question.
Here is a link for a JSFiddle but it loads very differently than on my local machine (JSFiddle shows errors.
HTML
<div id="container">
<div id="message-feed">
<h1>Let's get to know you a little bit more…</h1>
</div>
<form method="POST">
<div id="text-response">
<textarea id="text-response" placeholder="Type in here…"></textarea>
</div>
<input type="submit" class="submit-response">
</form>
</div>
CSS
#container {
width: 320px;
height: 480px;
background-color: #fff;
position:absolute;
left:50%;
top:50%;
margin:-240px 0 0 -160px;
}
#message-feed {
width: 100%;
height: 100%;
margin: auto;
overflow-y: scroll;
}
.message {
padding: 0px 15px 15px 15px;
width: 90%;
}
.message:after {
content:"";
display: block;
clear: both;
}
.bubble {
border: 0.5px solid #005393;
max-width: 80%;
padding: 10px;
}
.bot {
color: #005393;
float: left;
border-radius: 12px 12px 12px 0px;
}
.user {
float: right;
background-color: #005393;
border-radius: 12px 12px 0px 12px;
color: #fff;
}
#text-response {
height: 23px;
width: 220px;
border-top: 1px solid #eee;
background-color: #fff;
float: left;
}
textarea {
height: 20px;
width: 220px;
float: left;
resize: none;
border: none;
padding: 10px;
line-height: 22px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
overflow: auto;
}
.submit-response {
height: 45px;
width: 80px;
background-color: #005393;
color: #fff;
float: right;
text-align: center;
line-height: 42px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 1px;
font-size: 15px;
outline: none;
border: 0;
}
.submit-response:hover {
opacity: 0.5;
}
jQuery
$(document).ready(function() {
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
});
2 problems over there :
1/ You're not preventing the event default behavior. That means whenever you're clicking on the button which is a submit input, it will send a POST request. So the page will change. To prevent this :
$('.submit-response').click(function() {
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val();
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
2/ You're not actually adding the classes. $.append appends elements, not classes. So :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessage = $('textarea[name=text-response]').val()
$('#message-feed').append($newMessage, 'message', 'bubble', 'user');
});
should become :
$('.submit-response').click(function(event) {
event.preventDefault(event);
var $newMessageText = $('textarea[name=text-response]').val(),
$newMessage = $('<span class="message bubble user">' + $newMessageText + '</span>');
$('#message-feed').append($newMessage);
});
Now obviously it doesn't have to be a span, it could be anything else. It still has to be an element.
Also, this is only resolving the issues you had on the front end. You'll need AJAX to send the POST to the server side and get the data without refreshing/leaving the page. But that's another topic.

Can't get jQuery div to sit over wrap div

Have a problem with the navigation when scrolling down. It puts itself behind the .post class.
Scrolled down:
Not Scrolled down:
jQuery:
var num = $('.header').height();
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed-nav');
$('.wrapper').before($('.menu'));
} else {
$('.menu').removeClass('fixed-nav');
$('.menu-menu-container').prepend($('.menu'));
}
});
CSS:
.post {
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
}
/* Navigation style */
.nav {
margin-top: 20px;
margin: 0 auto;
width: 60%;
}
.nav ul {
margin: 0;
padding: 0;
width: 100%;
list-style: none;
font-size: 14px;
text-align: center;
background: rgba(255,255,255,0.9);
border-bottom: 1px rgba(0,0,0,0.1) solid;
font-weight: 300;
font-family: 'Open Sans', sans-serif;
line-height: 1.7;
text-transform: uppercase;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
URL:
http://www.bradlyspicer.net
Edit:
add z-index for div#header {
}
div#header {
z-index: 999;
}
Your stacking context is broken. Inside of Div#header you have nav#navigation. Outside div#header you have div#wrapper.
You can't have div#wrapper scroll below nav#navigation but above div#header. Any element outside div#wrapper is either above or below div#wrapper and its children (without some significant modifications that change the stacking context).
Stacking order isn't as simple as "Higher Z-Index = On Top". Stacking takes into account the location of the element in the element tree, opacity, positioning, and a number of other factors.
Philip Walton wrote a good article about z-index and stacking.
As for a solution, remove nav#navigation from div#header and put it inside the body, and add "position: absolute;" to the nav#navigation element. The result should look something like this.
<body>
<div id="header">...</div>
<div id="wrapper">...</div>
<nav id="navigation" style="position:absolute;">...</nav>
</body>

Categories

Resources