Weird behavior CSS overflow-y - javascript

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.

Related

Mistakes with Modal Pop up (display:none function in js)

I'm setting up a new personal website.
.Modal Pop up onclick on image, the modal pop up have to change the proprieties from display:none to display:flex.
I've modify my codes structure, in something like this:
https://www.youtube.com/watch?v=gLWIYk0Sd38
but still don't work.
Here's a link to a CodePen CODEPEN:
https://codepen.io/tta1eu/pen/gyGwOm
document.getElementById('Avatar15').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
});
document.querySelector('.close').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "none";
});
As per my understanding, you need to show popup in the center while scrolling the page. Then, you have to change below CSS properties.
`.bg-modal{
width: 100%; height: 100%; background-color: rgba(63,191,63,0.64); position: fixed;
top:0; justify-content: center; align-items: center; display: none;
}`
In the reference, youtube video link has no scroll of the HTML page. When where the page has scroll then it should be use fixed property.
Second Option:
Add one class on the body as 'overflow: hidden' when where modal is show and remove that class when modal is hide/display none.
you don't have the link / button with the ID=Avatar15 that have the click event to display to popup
add to the HTML :
<a id="Avatar15">Click</a>

How to get a button to fill the full width of the footer in Mobile View?

I'm trying to get a button that's found in the right rail column on my test page (in desktop view) to take up the entire footer of the page in mobile view.
This is the css and js code that I am using:
#media screen and (max-width: 768px) {
#register_text_container {
position: fixed;
bottom: 0px;
}
}
$(function() { //doc ready
if (!($.browser == "msie" && $.browser.version < 7)) {
var target = "#register_text_container", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
$(window).scroll(function(event) {
if (top <= $(this).scrollTop()) {
$(target).addClass("fixed");
} else {
$(target).removeClass("fixed");
}
});
}
});
The js code is not mine, it is one I found searching stackoverflow and its been working great, I just can't seem to figure out how to get it fill the page. I have tried using width: 100% but that didn't work.
The container that I'm calling in my CSS code is one I do not have direct access to, its built into the CMS and pops up as a button.
when I inspect the Register button to look at the html code to see what I should be calling in my css document this is what I found:
<div class="entry-page-button-container" id="register_link_container">
<div class="manageable-content" data-container="edit_register_text_container">
<a class="entry-text-link secondary-step step-button" id="register_text_container" href="">Register</a>
</div>
</div>
I've tried it on each class and id and so far still unable to get the register button to take up the full width of the page.
Appreciate any help I can get.
Thanks!
Test Page
You have a width: 250px !important on this link .entry-text-link secondary-step step-button
Change it to width:100%; (and remove the !important, it is not needed ).
Then add left:0; and right:0; in this fixed element .entry-page-button-container
And it should works properly.
just set the width of the button element to 100%. This will make it take up the full width of the button's parent container.
Set it using the style attribute like so:
<div>
<button style="width: 100%">Press this full width button!</button>
</div>
this will make the button go to the full width of the parent div element
You have to remove width : 250px !important on <a> element and add this on fixed element.
width: 100%;
left: 0;
bottom: -10px;

How to open a small box from a web page to make a choice

So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click

How to print scrollable DIV content

There is a website that I would like to print the div content of. The problem is that the div is scrollable and I'm not able to print all the content. I've tried display:none on all the divs except the one I want to print and then used the Awesome Screenshot extension for Google Chrome but it won't scroll just that div.
I've read about using Javascript in the HTML, I'm guessing, but I don't know how to use that code. It's not my website so how do I inject that code so that it will print the content?
I'm not sure what website you're using - but in IE you can open up F12 Developer tools, find the div you want to display, and modify the style on the fly:
{
display: block;
width: auto;
height: auto;
overflow: visible;
}
It would then cause the div to display all it's content, without scrollbars... hopefully this helps!
Without seeing the page or knowing its layout, it's hard to know what to suggest that won't look horrible.
But, if hiding all other content (in a print stylesheet, I assume) works, you may then be able add:
#media only print {
#idOfYourDiv {
width: auto;
height: auto;
overflow: visible;
}
}
to show all the contents at once.
Make all parents visible
I've struggled some hours with this and finally noticed the problem was that some of the parent tags where preventing the div to be fully visible, and instead a scrollbar from some parent tags was being visible on the print.
So the final effective solution was to apply all the rules (mentioned in other answers) to all possible parent tags that could be in the middle, including also an !important rule so they wouldn't be bypassed.
Like this:
#media print {
body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
display: block !important;
position: relative !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
margin-left: 0 !important;
}
}
This applies for almost any case in my projects.
**DANGEROUS APPROACH**
Use this JS function:
Printable DIV is div1
function printpage(){
var originalContents = document.body.innerHTML;
var printReport= document.getElementById('div1').innerHTML;
document.body.innerHTML = printReport;
window.print();
document.body.innerHTML = originalContents;
}
My answer is based on the ones given by #Porschiey and #Paul Roub with a slight addition.
Their given solution did work for me in most cases except for some where the <div> that I wanted to print had a CSS set to position: fixed. In the resulting print, this would usually contain only the content that was able to fit in the actual size of the <div> on the loaded page.
So, I also had to change the position CSS attribute to something like relative so that everything could get printed. So, the resulting CSS that worked for me is this:-
{
display: block; /* Not really needed in all cases */
position: relative;
width: auto;
height: auto;
overflow: visible;
}
Google messages updated their divs. Use this:
(function() {
var originalContents = document.body.innerHTML;
var printReport= document.querySelector("body > mw-app > mw-bootstrap > div > main > mw-main-container > div > mw-conversation-container > div > div > div > mws-messages-list")
document.body.innerHTML = printReport.innerHTML;
document.body.style.display = 'block';
document.body.style.overflow = 'visible';
window.print();
document.body.innerHTML = originalContents;
}())
In case if someone just want to print the scrollable list, use your mouse to select the scrollable list, right click on selected content and print. Ctrl+A or select all or just right click without selection might not work, so you must select the list from start to end to be able to print on multiple pages

Show a div on click with cuepoint

Why won't this work?
Using cuepoint.js; you can define cue points within the html5 video.
But; I'd like to; in addition display a #div on click. And ONLY on click.
Once the video resumes; or the image is clicked again; the video resumes and the #div will disappear!!!!
#playdiv1 {
display: none;
}
$('#1').click(function() {
cuepoint.setTime(1)();
$("playdiv1").style.display = "block"; // Why wont this work?
});
This div should show along with the que:
<div id="playdiv1" style="min-height: 300px; min-width: 500px; display: hidden;">
</div>
Library in reference;
http://cuepoint.org/
FULL CODE ~
http://pastebin.com/HG0wVVaK
This doesn't make sense. THE cuepoint time; works..
$('#1').click(function(){
cuepoint.setTime(0)();
But when I add the '$('#playdiv1').show();' right underneath it. It doesn't work?
$('#1').click(function(){
cuepoint.setTime(0)();
$('#playdiv1').show();
});
Your selector is wrong.
Your code, $("playdiv1"), matches elements of type <playdiv1></playdiv1>, which isn't what you want.
The correct code, $("#playdiv1"), selects the element with id playdiv1.
You're also attempting to set the style attribute on the jQuery wrapper around the element. You need to either use the .show method, or access the first matched element.
Either of these will work:
$('#playdiv1').show();
// or
$('#playdiv1')[0].style.display = "block";
Since you have the CSS hiding the playdiv1 you do not need a display declaration inline with your HTML, so remove that -
<div id="playdiv1" style="min-height: 300px; min-width: 500px;">
and change the jQuery to
$('#playdiv1').show();
You can use this...
$('#1').on('click', function() {
cuepoint.setTime(1)();
$("#playdiv1").show();
});
And remove display: hidden; of the style property in the <div> tag...
Switching the order somehow worked;
$('#1').click(function(){
$('#playdiv1').show();
cuepoint.setTime(0)(); // Having this at the bottom; or after the show.
});

Categories

Resources