Develop Reference

Weird behavior CSS overflow-y

I'm making a scrolling menu that has a list of cards, Each card has a button that shows more information.
the problem is that the overflow-y property hides the (toggled info) that should appear at the left side of the menu.
enter image description here
as you can see in the picture, I wanna get the (overflow-x visible) for the card-list but making it overflow-y: auto/scroll simply hide it
code Sandbox if you wanna take a look at the code:
https://codesandbox.io/s/github/Machfar-Souhayel/TestingOverflowBehavior

You could have the expanded version outside of the original list and just alter it to fit the item and then make it visible.
It also is not nessesary to create a class that make it visible/invisible and add and remove that with toggledElement.classList.add("show");
Instead just use element.style.display = 'block'; // 'none';
That way you do not need to use the target.children property but can call the function with an argument.
<button onclick="toggleClass('Title','Content');">Expand</button>
<script>
function toggleClass(header, content){
document.getElementsByClassName('expanded')[0].innerHtml = `<h1>${header}</h1><br><p>${content}</p>`;
document.getElementsByClassName('expanded')[0].style.display = 'block';
}
</script>
<style>
.expanded{
position: abolute;
top: 50vh;
left: 50vw;
transform: translate(-50%,-50);//just for some styling
display: none;
}
</style>
<div class="expanded"></div>
I hope I could help you.

Html Can you run css code from javascript?

I am making a canvas on my website that you can draw on. To achive this effect I draw a fillRect everytime the mouse moves, at the mouseposition. Everithin works fine but when i try to add a background image, it hides everything. I tried using canvas.drawImage();
Then I found that you can add Background image from CSS, using: background:url(pic1.jpg);
This workes fine, but I dont want to the image to be there from load, but load when the user clickes a button. Anny Idea how to do this? Can I call the CSS from Java like you can from HTML, or is there another way. Thanks for answers

You can use JavaScript to programmatically set the CSS that defines the background.
var img = "some_image.png";
element.style.backgroundImage = "url(" + img + ")";
Make sure to change the element with the actual HTML element you want to set the background image on.

You can use HTML DOM to do this like the code below
<button type="button"
onclick="document.getElementById('id').style.backgroundImage = "url('image.png')"">
Click Me!</button>

You need something like that:
handling the event (in thi example click)
Append the new css property to the element target
function appendImg() {
document.getElementById('result').style.backgroundImage = 'url(http://4.bp.blogspot.com/-Q13U4dlElI8/VSW78iey57I/AAAAAAAAI7k/HO3zYPaRYso/s1600/img_john_lennon2-500.jpg)';
}
#result {
width: 500px;
height: 400px;
background-size: 100% auto;
background-repeat: no-repeat;
visibility: visible;
}
<button onclick="appendImg()">Imagine</button>
<hr>
<div id="result"></div>

I cannot apply CSS through Jquery on the content which is getting loaded dynamically.

There is an anchor tag, when you click that a qtip appears. That qtip is dynamically generated.
<a class="change-zip" href="#zip-change-tooltip">something</a>
/*this is dynamically loaded */
<div class="qtip">
<div class="content">
<div id="zip-change-tooltip">
*content is here*
</div>
</div>
</div>
Now on above content i am using this
$(document.body).on('click','.change-zip',function(){
$('#zip-change-tooltip').parents('.qtip').css('height','200px');
});
It doesn't work in the first place but when i click on it second time it works fine that's because the DOM is already loaded. What should i do to make it work ?
Thanks in advance.

Nothing in jquery called
$(document.body)
You will get an error in that.. just use
$(document)
or
$(document).ready(function(){
// your code here after document is ready
});
or use
$(document).on('click','.change-zip',function(){
$('#zip-change-tooltip').parent().parent().css('height','200px');
});

I suspect what you're seeing a styling issue, I dropped your code into JSBin and it works:
http://jsbin.com/tumogaxahi/1/
If you edit that JS bin, this is the code that's being used. It's basically identical to what you provided with some basic CSS so you can see the height change. I'm appending the change zip anchor tag after adding the click handler to demonstrate that the delegated handler is working.
<style>
.qtip {
width: 100px;
height: 100px;
background: blue;
}
a {
color: #fff;
}
.change-zip {
display: block;
width: 100px;
text-align: center;
padding: 10px 0;
}
</style>
<div class="qtip">
<div class="content">
<div id="zip-change-tooltip">
</div>
</div>
</div>
<script>
$(document.body).on('click', '.change-zip', function() {
$('#zip-change-tooltip').parents('.qtip').css('height','200px');
});
$('#zip-change-tooltip').html('<a class="change-zip" href="#zip-change-tooltip">something</a>');
</script>
Have you inspected the qtip in devtools to see if the inline style is being applied? If it is, perhaps there is a CSS rule overriding the inline style -- !important in a CSS rule will override an inline style applied by JS.
Just a side note - $(document.body) is totally valid - it's just creating a jQuery object around the dom node represented by document.body. It's effectively the same as $('body'), but using the native document.body is a faster selector because it doesn't have to use jQuery's selector engine.

I figured out how to do it. I basically added setTimeout of 100 on my function so it would be executed after a delay. That would help the DOM to load first and then apply the css on it. Thank you guys for your time.
$(document.body).on('click','.change-zip',function(){
setTimeout(function(){
$('#zip-change-tooltip').parents('.qtip').css('height','200px');
},100);
});
The delay is so short that it's hard to notice the change in the css. It worked like a charm.

How do you show just the first line of text of a div and expand on click?

I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.

Assuming that you don't want to use any JavaScript library (which is odd).
See: http://jsfiddle.net/JUtcX/
HTML:
<div id="content"></div>
CSS:
#content {
border: 1px solid red;
height: 1em;
padding: 2px; /* adjust to taste */
overflow: hidden
}
JavaScript:
document.getElementById("content").onclick = function() {
this.style.height = 'auto';
}
Alternatively, if you would like to use a JavaScript framework such as jQuery, you can animate it.
See: http://jsfiddle.net/JUtcX/2/
$('#content').click(function() {
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);
$(this).animate({height: fullHeight}, 500);
});

This is easily done using CSS + JavaScript. You just need to set the height of the div to the height of a single line, and hide all overflow. Then when the user clicks on the div, use a nice animation handler to perform a blind-down or other similar effect to show the full contents of the div.
Here is a very basic example (no animation): http://jsfiddle.net/9Lw6T/

$(document).on('click', '.collapsible', function () {
$(this).toggleClass('collapsed');
});
p {
cursor: pointer;
}
.collapsed {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>

<div id='a' onclick='toggletext'>first line<br /></div>
function toggletext(){
var html= document.getElementById('a').innerHTML;
if(html=='first line<br />'){
html = 'first line<br />next lines<br />next lines<br />';
}else{
html = 'first line<br />';
}
document.getElementById('a').innerHTML = html
}
this can be optimized and can be made to use one of the common libs

You could do this with some jQuery.
<div id="a">
<span id="first">This is the first line (read more)</span>
<br />
<span id="rest">This is the rest of the text</span>
</div>
script
$('#rest').hide();
$('#first').click(function(){
$('#rest').show();
});
http://jsfiddle.net/jasongennaro/dC32A/

In CSS set the size of the div to size of the line (important: you might need to use line spacing attribute to get proper padding on the bottom with second line).
I don't know about clicking, but you can use :hover in CSS to change the style (reset line spacing, reset div size and overflow to proper values) to get on hover-show effect.
Or you can use JavaScript and change that CSS on click (easy to do with jQuery).

Posting my comment as an answer:
Another approach could be, defining the class height: 1em; overflow-y: hidden; and then adding/removing it on click with javascript.
Or maybe you could also handle it in the :active-pseudo-class by wrapping your <div> with an <a>-tag, so no javascript would be needed. But then the div would collapse again on losing focus.

This will be sufficient:
To hide all but the first line:
var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'hidden';
theDiv.style.height = '1em';
To show all the text:
var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'visible';
theDiv.style.height = 'auto';
Or, if you were to use jQuery:
$('#theDiv').css({ height: '1em', overflowY: 'hidden' });
$('#theDiv').css({ height: 'auto', overflowY: 'visible' });

Setting the hide of the div to 1em and then exapnd it onclick is the solution.
Check this. I haven't used any JS library.
CSS
.expandable{
height:1.2em;
overflow:hidden;
}
HTML
<div class="expandable" onclick="expand(this)">Your text here</div>
JS
window.expand = function(el) {
el.style.height = "auto";
}
Here is the fiddle
http://jsfiddle.net/RwM8S/1/

DIV with text over an image on hover

OKay first off this is really really similiar to the http://dribbble.com homepage.
In the simplest form possible. I have an image, and i'm trying to CSS it so that when i hover over the image, a DIV shows up with some text and a partially transparent background color.
I have no idea how to do this..

Here is a start. IE6 won't do this, unless you make the parent an anchor (a).
HTML
<div class="container">
<img src="something.jpg" alt="" />
<div>some text</div>
</div>
CSS
.container div {
display: none;
opacity: 0.7; /* look into cross browser transparency */
}
.container:hover div {
display: block;
}

#alex, I think he wants the text to appear over the image, not under it. Two ways to fix this:
Add position:absolute to the div containing the text.
Use a background-image instead of an img tag.
I'd go with 1, as it's better semantically and better for accessibility to use img tags for content-bearing images.

If what you want to obtain is an effect like that on Dribbble page, then you do not need to create a div over an img.
It's sufficient to have 2 versions of the image, one normal and one desaturated and with luminosity increased (or something like that, to give the impression of "transparency").
Now you create a div with the image as background and on mouseover you switch background and add the text.
On mouseout you revert the changes.
EDIT: Of course in practice you will dynamically assign the images name (e.g. with PHP), but that's another story. You may even automagically generate the "transparent" image by using GD libraries I guess.
A little example:
CSS:
.squareImg
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100.jpg");
}
.squareImgOver
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100transp.jpg");
}
HTML
<div id="mydiv" class="squareImg" onmouseover="writeText();"
onmouseout="eraseText()"></div>
JS
function writeText()
{
var d = document.getElementById("mydiv");
d.className = "squareImgOver";
d.innerHTML = "something here!";
}
function eraseText()
{
var d = document.getElementById("mydiv");
d.className = "squareImg";
d.innerHTML = "";
}
</script>

I suggest using jQuery as it's easy to say "mouseover" triggers another thing to show up.