How to fix text overflowing from <span> - javascript

I've got this strange thing where the text in a div goes below it after I update from the original text in a script function. Example below ("Hello World" is default, "test" is the updated text)
CSS
#footer {
height: 50px;
left: 0px;
top: 800px;
background: rgb(40, 40, 40);
border-radius: 0px 10px 10px 0px;
padding: 0px 15px;
font-size: 40px;
position: absolute;
overflow: visible;
color: #ac962a;
-webkit-box-shadow: 0px 10px 10px #383838;
box-shadow: 0px 5px 10px #383838;
}
HTML
<div id="footer">
<span id="botEvent">Hello World</span>
</div>
The botEvent id is what I am updating, and after the update the text goes below the original background box.
Any help is appreciated, thank you in advance and have a good day :)


do you have something else going on that's causing the problem? If you are using a p tag set margin and padding to 0
document.getElementById('botEvent').textContent = 'TEST';
#footer {
height: 50px;
left: 0px;
top: 20px;
background: rgb(40, 40, 40);
border-radius: 0px 10px 10px 0px;
padding: 0px 15px;
font-size: 40px;
position: absolute;
overflow: visible;
color: #ac962a;
-webkit-box-shadow: 0px 10px 10px #383838;
box-shadow: 0px 5px 10px #383838;
}
p{
margin:0;
padding:0;
}
<div id="footer">
<p id="botEvent">Hello World</p>
</div>

Related

Remove Div not working

I'm trying to write a code for a page:
show a button and embedded youtube video, once the user clicks on it, he goes to a link (not youtube) and the video disappears.
also there is a button to remove the video.
I've managed to make the video clickable to a link, but the problem that the video doesn't get removed - not when clicked on and not when clicking on the button.
.the-click {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 999;
background-color: white;
opacity: 0;
}
.container {
position: relative;
}
.myxButton {
-moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
box-shadow: inset 0px 1px 0px -1px #cf866c;
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 5px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
background-color: #bc3315;
}
.myxButton:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button class="myxButton" onclick=$( '#div1').remove();>« Stop Video »</button>
<div id="div1" align="center" class="container" onclick=$( '#div1').remove();>
<iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&autoplay=1&controls=0&fs=0&rel=0&showinfo=0&disablekb=1&wmode=opaque" frameborder="0"></iframe>
</div>
</center>
Console result when clicking
I've also tried:
onclick="$('#div1').remove();"
onclick='$('#div1').remove();'
#same with# onclick=$('#div1').hide();
Thanks

Use this syntax. remove your inline onClick attribute from the button and use jquery to add the event listener.
Your button HTML should be just
<button class="myxButton">« Stop Video »</button>
The reason for asking to remove the inline attribute is because its deprecated already (but still few browsers support it), But in future almost all browsers will stop supporting it. Also this way we keep the HTML and JavaScript code separate which is good for maintenance.
Here is a working snippet.
$('.myxButton').on('click',function(){
$('#div1').remove();
});
.the-click {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 999;
background-color: white;
opacity: 0;
}
.container {
position: relative;
}
.myxButton {
-moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
box-shadow: inset 0px 1px 0px -1px #cf866c;
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 5px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
background-color: #bc3315;
}
.myxButton:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button class="myxButton">« Stop Video »</button>
<div id="div1" align="center" class="container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&autoplay=1&controls=0&fs=0&rel=0&showinfo=0&disablekb=1&wmode=opaque" frameborder="0"></iframe>
</div>
</center>

Why slideToggle is going downwards and out of the screen?

I am writing some code to toggle a div class. I want to slide down the div up to the bottom of the page and slide up when clicked again.
My HTML code contains:
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name" ></div>
</div>
</div>
and the CSS for this HTML :
.chat-sidebar{
width: 200px;
position: fixed;
height: 370px;;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius:5px 5px 0px 0px;
}
.sidebar-name{
padding-left: 10px;
padding-right: 10px;
margin-top : 0.8cm;
font-size: 20px;
}
.chat_head{
background:#f39c12;
color:white;
padding:2px;
font-weight:bold;
cursor:pointer;
border-radius:5px 5px 0px 0px;
margin-top: -10px;
}
and now I am sliding the main chat-sidebar DIV using jQuery function like :
$(document).ready(function() {
$('.chat_head').click(function(){
$('.chat-sidebar').slideToggle('slow');
});
});
slideToggle is working fine when click the .chat_head div. But it is going down too far so that it is not visible anymore (out of the screen). What am I missing here?

You need to slideToggle the .chat_body instead of the whole wrapper div. So just remove the height from .chat-sidebar and move it to .chat_body. Now apply the slideToggle() function on .chat_body:
$(document).ready(function() {
$('.chat_head').click(function() {
$('.chat_body').slideToggle('slow');
});
});
.chat-sidebar {
width: 200px;
position: fixed;
right: 10px;
bottom: 0px !important;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid rgba(29, 49, 91, .3);
border-radius: 5px 5px 0px 0px;
}
.sidebar-name {
padding-left: 10px;
padding-right: 10px;
margin-top: 1px;
font-size: 20px;
}
.chat_head {
background: #f39c12;
color: white;
padding: 2px;
font-weight: bold;
cursor: pointer;
border-radius: 5px 5px 0px 0px;
margin-top: -10px;
}
.chat_body {
height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-sidebar">
<div class="chat_head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat_body">
<div class="sidebar-name"></div>
</div>
</div>

Try this :
$(document).ready(function() {
$(".head").on("click",function(){
$(".chat-sidebar").slideToggle("slow");
})
})
.wrapper {
border: 1px solid gray;
width: 200px;
position: fixed;
right: 10px;
bottom: 0;
min-height: 50px;
border-radius:3px 3px 0px 0px;
}
.head {
background:#f39c12;
color:white;
font-weight:bold;
cursor:pointer;
position: absolute;
width: 200px;
height: 50px;
border-radius:5px 5px 0px 0px;
}
.chat-sidebar {
background-color: #fff;
height: 200px;
}
<div class="wrapper">
<div class="head">
<h4 align="center"><b>Online Users</b></h4>
</div>
<div class="chat-sidebar"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

div id "wrapper" not running in box model

I created an id wrapper in CSS:
#wrapper {
position: relative;
background: yellow;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
width: 960px;
padding: 40px 35px 35px 35px;
margin: 0px auto;
}
class box in CSS:
float: left;
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
HTML:
<div id="wrapper"><div class="box">
<p>ini box 1</p>
</div> </div>
The problem is the box is out from the wrapper. What is the soultion?

Remove the float:left style from box css
.box {
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
}

Add overflow: auto to wrapper to clear the float of box.

I always recommend a clearing element after floats, old IE especially behaved unpredictably without them
<div id="wrapper">
<div class="box">
<p>ini box 1</p>
</div>
<div class='clr'></div>
</div>
additional CSS
.clr {
clear:both;
height:0px;
}

CSS & JQuery: Better Usability

I would like to improve my user experience of the following code:
HTML:
<div class="news-item">
<div class="main-content">
<div class="header"> Header 1 </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>
<div class="news-item">
<div class="main-content">
<div class="header"> Header </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>​
JavaScript:
jQuery(document).ready(function() {
$(".header").click(function () {
$(this).parent().toggleClass("expand");
});
});​
CSS:
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
padding-bottom: 20px;
cursor:pointer;
}
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 22px;
height: 20px;
overflow: hidden;
}
.expand {
height: 200px;
}​
Demo: http://jsfiddle.net/9UJ7f/4/
As you may notice, when you click the Header, the box expands or collapses.
However, this only works when we click the Header, e.g. when we click the box's border (in collapsed mode) nothing happens.
To eradicate "void-clicks", I would like it to be like this:
A. In Collapsed Mode:
If you click anywhere on the box (.main-content class), the item will expand
B. In Expanded Mode:
If you click only the .Header class, the item contracts again.
What would be the best approach to do this ?
UPDATE:
OK, you were right. The CSS was a bit off.
I choose sandeep's solution as it was the most minimalistic but best working solution.
But also thanks to everyone else who helped. Especially the JS solutions from thecodeparadox & Arif. (though it still has some "void clicks" around the border).
You are awesome, guys. I'll give you all a thumbs up.

jQuery(document).ready(function() {
$('.header').click(function(e) {
e.stopPropagation();
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});
Perfect working sample

Give padding to heading DIV. Write like this:
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-bottom: 22px;
height: 42px;
overflow: hidden;
}
.header ~ div{
margin:22px;
}
.header{
font-size: 20px;
padding: 22px;
cursor:pointer;
}
Check this http://jsfiddle.net/9UJ7f/14/

demo
<div class="main-content">
<h2 class="header"> Header 1 </h2> <!-- you can use h2 -->
<div class="content"> lorum ipsum 1 </div>
<div class="time"> time 1</div>
</div>
Just remove the padding from the container (.content) and play with your children elements padding.
.main-content {
position:relative;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
width: 80%;
height: 50px;
background: rgb(251, 251, 251);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h2.header, .content, .time{
padding:3px 22px;
}
h2.header{
padding:13px 22px;
font-size: 20px;
cursor:pointer;
}
.time{ padding-bottom:20px; }

This should work for you: DEMO
Here's the new javascript:
jQuery(document).ready(function() {
$(".news-item").click(function () {
if( !$('.main-content', this).hasClass('expand') )
$('.main-content', this).toggleClass("expand");
});
$('.news-item .main-content.expand .header').live('click',function () {
$(this).parent().toggleClass("expand");
});
});​
This does what you describe. It only expands an item if .news-item has no .expand class. If it does have one, then clicking the header is the only thing that will close it.

Your js is correct. Change you css with
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
cursor:pointer;
padding: 22px 22px 20px 22px;
}
.content { padding: 0 22px; }
.time { padding: 0 22px; }
/* thanks to raingroove for the main styling ! */
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 66px;
overflow: hidden;
}
.expand {
height: 200px;
}
see http://jsfiddle.net/9UJ7f/25/

small addition to #thecodeparadox answer
jQuery(document).ready(function()
{
$('.header').click(function(e) {
e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; //e.stopPropagation() does not work for all browsers
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});

Expanding parent div's height to fit floated & unfloated child divs

I have a parent div #modal_share with a defined height of 400px. I want it to extent its height to contain all its child divs when a new child div which is originally hidden, becomes visible.
Problem: Right now, when a hidden child div .modal_error_msg becomes visible, some divs below this newly visible div gets pushed outside its parent div.
How can I make the parent div #modal_share expand its height to contain all the visible child divs?
JSFiddle: http://jsfiddle.net/TEmGc/
CSS
#modal_share {
width: 565px;
height: 400px;
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
display: none;
}
.modal_big_hline {
width: 100%;
height: 1px;
margin-top: 25px;
border-top: 1px solid #CCC;
float: left;
}
.modal_error_msg {
width: auto;
height: 15px;
padding: 15px 25px;
margin: 0px 25px;
font-size: 12px;
color: #B79000;
border: 1px solid #E7BD72;
background: #FFF3A3;
clear: both;
display: none;
}
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
}
HTML Structure
<div id="#modal_share">
<div class="modal_error_msg"></div>
<div class="modal_big_hline"></div>
<div id="modal_big_button_container"></div>
</div>

For parent div #modal_share declare height as auto then it will automatically adjust height based on child elements.

Set the modal_share's height to auto:
#modal_share {
width: 565px;
height: auto; //<----
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
}
See Feedle http://jsfiddle.net/TEmGc/1/

Categories

Resources