I am developing a jQuery Mobile project which i have an extendable popup in it but when i extent the text in the popup, it doesn't scroll.
I have checked overflow: scroll and all the other options in overflow, but none worked. but when i extent the text i see a bar appears on the right side of the popup, but no scroll.
this is the last code i tried and did not work as well
$("#buttonTest").click(function() {
$('#Popup').css('overflow', 'scroll');
$('#Popup').popup('open');
});
and this is the popup itself
<div data-role="popup" id="Popup" data-transition="flow">
<div class="newsCards">
<img src="images/back.svg">
<h4> header</h4>
<div class="newsFader">
<!-- extended text which is hidden at first -->
</div>
</div>
</div>
I tried to replicate your use case by creating the popup and styling it, the ideal way to make the test scrollable is by using css only.
This is my scrollable newsFader class i took for the text container.
<style type="text/css">
.newsFader {
width: 80%;
height: 50px;
overflow: scroll;
margin-left: auto;
margin-right: auto;
}
</style>
Maybe the text was not scrolling beacuse the size of the container was not defined forcing it to adapt to its content. Anyway this is the popup code i tried and scrolled correctly:
<div data-role="popup" id="Popup" data-transition="flow">
<div class="newsCards">
<img src="">
<h4> header</h4>
<div class="newsFader">
<!-- extended text which is hidden at first -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
I hope it helps you, Happy Coding!
Related
When I randomize position of some divs with text and some others with images (on load and using setInterval), images always get on the top of the divs with text. I’ve been trying to find a solution by myself but I just started learning how to code a few weeks ago, and I don’t even know what am I looking for. So I’d appreciate if someone could help me. This is my code so far:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title></title>
<style>
div{
position: absolute;
}
.description{
width: 650px;
}
</style>
<script type="text/javascript">
function Init(){
divs = document.querySelectorAll("div");
setInterval (mover, 500);
}
function mover(){
divs.forEach(div => {
var spaceH =window.innerHeight - div.clientHeight;
var spaceW =window.innerWidth - div.clientWidth;
div.style.top=Math.round(Math.random()* spaceH) + "px";
div.style.left=Math.round(Math.random()* spaceW) + "px";
});
}
</script>
</head>
<body onload="Init()">
<div class="description">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div><img src="MyImage1.jpg" class="imagenes" alt=""></div>
<div><img src="MyImage2.jpg" class="imagenes" alt=""></div>
</body>
</html>
I intend to doit with many divs more. This is just a test. And sorry if I’m not explaining myself properly.
If one div is rendered after another, it will overlay the prior div. It doesn't matter if the div contains text or an image. The newer div will still overlay the older div.
Example:
.overlay {
border: 1px solid gray;
width: 80px;
height: 80px;
background: transparent;
padding: 0.2rem;
position: absolute;
color: red;
}
<div class="overlay">
Here is a div with text. Lots and lots.
</div>
<div class="overlay" style="left: 40px; top: 40px">
<img src="https://picsum.photos/80" style="width: 80px; height: 80px">
</div>
<div class="overlay" style="left: 80px; top: 20px">
Here is a div with text. Lots and lots.
</div>
I'm trying to add a dropdown effect to my website but I can't seem to get it right.
I'd like to click on the '+' and let the shape expand to show text, so after I clicked '+', some sort of animation should begin?
I'm new to javascript and I'd like if someone could help me out
http://severinereard.be/test/
Here's the website, I only finished the mobile version so it's best viewed in a thin browser window.
In the first section 'Pelvi-périnéologie' I added a paragraph which I hid with display none.
I hope this is enough information
UPDATE:
I added the javascript and it works for the first section but not for the rest. I'd also like for the dropdown to not go so fast but smooth?
Thanks in advance!
Here's an example of a possible solution. Layout is different, but you'll get the idea.
UPDATE: included javascript to handle the click
const sections = [...document.getElementsByTagName("section")];
sections.map((section) => {
section.addEventListener("click", function() {
const paragraph = this.querySelector("p");
paragraph.style.maxHeight = "100px";
})
})
section {
display: inline-block;
}
section img,
section h3,
section h5 {
display: inline;
}
section p {
max-height: 0;
overflow-y: scroll;
transition: max-height 1s;
width: 300px;
/* for demo purpose */
}
section:hover p {
/*max-height: 100px; to force scrollbar */
}
<section>
<img src="https://via.placeholder.com/40">
<h3>Pelvi-périnéologie</h3>
<h5>+</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
I'm unable to get the content to float right. I have two side bars that I want to display inline with each other, and the content to float to the right of it. Like this:
Click here to see what I am trying to accomplish
Click here to see what is displaying
.showMain {
width: 550px;
display: block;
float: left;
font: normal 300 18px/24px 'aktiv-grotesk-std', sans-serif; }
.showMain a{
text-decoration: none;
-webkit-transition: opacity 0.75s ease;
-moz-transition: opacity 0.75s ease;
-o-transition: opacity 0.75s ease;
transition: opacity 0.75s ease;
color: #d7df23; }
.showMain a:hover {
opacity: 0.6;
filter: alpha(opacity=60); }
.showSidebar {
width: 304px;
display: block;
vertical-align: top; }
.showSidebar2 {
width: 304px;
display: block; }
<div class="rivnoShowInfo group row">
<div class="showSidebar">
<div class="showLocation">
<h5 class="showVenue">
Lincoln Park Athletic Club </h5>
<div class="showAddress">
1019 W. Diversey Pkwy<br />
Chicago, IL </div>
</div>
<div class="showDateCost">
<h5 class="showDate">
Session 1: July 25<br />
Session 2: July 26<br />
Session 3: August 1<br />
Session 4: August 2<br />
<br /><br />
Event Time: 7:30AM – 8:45AM<br />
</h5>
<div class="showCost">
Complete 4 Session Registration: $X<br />
<br />
Participant waivers can be downloaded from the links below and are required to be submitted in advance to: xxx#rivernorthchicago.com </div>
</div>
<div class="rivnoPageTitle eventSidebar register">
</div>
</div>
<div class="showSidebar2">
<div class="showLocation2">
<h5 class="showVenue2">
The Chopping Block </h5>
<div class="showAddress2">
222 Merchandise Mart<br />
Chicago, IL </div>
</div>
<div class="showDateCost2">
<h5 class="showDate2">
</h5>
<div class="showCost2">
Complete 4 Session Registration: $X<br />
<br />
Participant waivers can be downloaded from the links below and are required to be submitted in advance to: xxx#rivernorthchicago.com </div>
</div>
<div class="rivnoPageTitle eventSidebar2 register">
</div>
<div class="showMain" style="display: block;">
<span class="leadIn">Achieving Optimum Dance Performance – A New Workshop</span>
<div class="page" title="Page 1">
<div class="section">
<div class="layoutArea">
<p> </p>
<div class="column">
<p>For nearly 20 years, <strong>River North Dance Chicago</strong> has delivered leading edge dance training programs focused primarily on improving dance skills and technique. Thousands of dancers have participated in these programs and applauded the inclusion of lunch seminars and mini-sessions on the topics of nutrition, injury prevention and conditioning. However, the overwhelming feedback has been these topics are great but only touch the surface of what a dancer needs to perform at an elite level.</p>
<p>RNDC is responding to that feedback with a new multi-module workshop entitled <strong>Achieving Optimum Dance Performance</strong>. This new offering is the result of collaborations with several leaders in the fields of sports medicine, injury prevention and body conditioning. These partners which include <strong>Midwest Orthopaedics at RUSH</strong>,<strong> Chicago Athletic Clubs</strong>, <strong>Jackie Caul at Presence Health</strong>, <strong>Athletico</strong>, and <strong>The Chopping Block</strong> have worked with RNDC to launch these new modules this summer.</p>
<p>This new workshop was designed as a comprehensive solution to meet the needs of elite dancers, but participants can register for each module separately. Lunch seminars and mini-sessions within RNDC current programs will continue. But for RNDC summer training participants looking to supplement those topics, or for dancers not participating in RNDC’s summer intensives, this new workshop is for you. River North Dance Chicago is committed to understanding and meeting the needs of aspiring and professional dancers, and is excited to bring this new product to the dance community.</p>
</div>
</div>
</div>
</div>
</div>
</div>
I appreciate any help I can get with this.
I wouldn't think of that goal as having "two sidebars". It looks like one sidebar, with two articles of content. If you're willing to put one more container in your HTML, that should work well.
Usually, it makes sense to have the side content be the one that's "floated", while the "main content" uses all remaining space (and does NOT get floated). So I'd suggest trying the opposite of what you have now.
body {
width: 70%;
font-size: 10px;
}
sidebar {
float: left;
width: 100px;
margin-right: 2em;
}
main {
font-size: 160%;
}
<sidebar><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</sidebar>
<main>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</main>
Your main content is in the div class="showSidebar2">..</div>. You should place it outside of this div, in the div class="rivnoShowInfo group row">..</div>.
There are multiple ways to solve this problem, but in my opinion the simplest way to solve this, is by placing a wrapper around your two sidebars, set the width to say 30%, then make your content 70% width. Set both your content and sidebar display:inline-block
I'm working on a large text editor application in Chromium. The editable content resides in a contenteditable div. This div can contain divs and spans which get various classes applied to them to create rich content. The trouble I have is with a very large amount of text/html in my contenteditable div, typing is very slow since it causes the entire document to reflow (all of my div/spans inside of my contenteditable are position:relative). If I make these position:absolute, typing is fine since reflow does not occur, but each child div/span overlaps.
Does anyone have a method for preserving the non-overlapping flow of position:relative, but without having to reflow the ENTIRE document when I type some text, even if it doesn't change line geometry?
-- Edit --
Example:
https://jsfiddle.net/05xfc6pj/
CSS
.editable {
position: absolute;
}
.wrapper {
position: relative;
}
.title {
font-weight: bold;
background-color: red;
width: 100%;
}
.body {
width: 100%;
margin-bottom:20px;
}
HTML
<div class="editable" contenteditable="true">
<div class="wrapper">
<div class="title">Title</div>
<div class="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
...
</div>
(Note, if the example isn't slow for you, copy and paste everything inside of .editable a few times)
I am using backbone.js to render these .wrapper items; would it be feasible making .wrapper have position:absolute and then calculating the position with JS (we know the height of each div), and setting a top offset?
Is it possible to make text inside a div to fit its DIV while the bowser window is resized?
I read this and this and few other about Fit Text to DIV but none of them gives an accepted answer about fit text when browser window is resized.
<div id="wrapper">
<div class= "tfz">FIT THIS TEXT</div>
</div>
jsFiddle
Try with -
word-wrap: break-word;
and set the width in %. Hope that will fix the problem.
Example
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Style
div {
width: 500px;
word-wrap: break-word;
font-size: 2vw;
}
Check it here
With width given as px, you really cannot resize it, unless you use some javascript/jquery! So if it is really important you to mention width in px you just can achieve it through jquery/javascript.
So if you agree to mention it in % then definitely you can manage it through CSS as below:
#wrapper{
position: relative;//no need to change this
width: 50%;
word-wrap: break-word;//apply this.
height: auto;
}
DEMO